Examples

Hero

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

<div id="exampleHero" class="carousel slide hero_slide" data-ride="carousel">
	<div class="carousel-inner">
		<div class="carousel-item active">
			<div class="row align-items-center">
				<div class="col-6">
					<h2 class="display-4 font-weight-bold">Hello, world!</h2>
					<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
					<a class="btn btn-primary" href="#" role="button">Learn more</a>
				</div>
				<div class="col-6">
					<a class="carousel-control-prev" href="#exampleHero" role="button" data-slide="prev">
						<span class="carousel-control-prev-icon" aria-hidden="true"></span>
						<span class="sr-only">Previous slide</span>
					</a>
					<a class="carousel-control-next" href="#exampleHero" role="button" data-slide="next">
						<span class="carousel-control-next-icon" aria-hidden="true"></span>
						<span class="sr-only">Next slide</span>
					</a>
					<figure class="overflow-hidden rounded m-0 my-2">
						<img src="https://cdn.modyo.cloud/uploads/c1eb380f-8204-4ef2-b119-cb8c3d415cb7/original/example_2.jpg" alt="People working at a table">
					</figure>
				</div>
			</div>
		</div>
		<div class="carousel-item">
			<div class="row align-items-center">
				<div class="col-6">
					<h2 class="display-4 font-weight-bold">Hello, world!</h2>
					<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
					<a class="btn btn-primary" href="#" role="button">Learn more</a>
				</div>
				<div class="col-6">
					<a class="carousel-control-prev" href="#exampleHero" role="button" data-slide="prev">
						<span class="carousel-control-prev-icon" aria-hidden="true"></span>
						<span class="sr-only">Previous slide</span>
					</a>
					<a class="carousel-control-next" href="#exampleHero" role="button" data-slide="next">
						<span class="carousel-control-next-icon" aria-hidden="true"></span>
						<span class="sr-only">Next slide</span>
					</a>
					<figure class="overflow-hidden rounded m-0 my-2">
						<img src="https://cdn.modyo.cloud/uploads/c1eb380f-8204-4ef2-b119-cb8c3d415cb7/original/example_2.jpg" alt="People working at a table">
					</figure>
				</div>
			</div>
		</div>
		<div class="carousel-item">
			<div class="row align-items-center">
				<div class="col-6">
					<h2 class="display-4 font-weight-bold">Hello, world!</h2>
					<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
					<a class="btn btn-primary" href="#" role="button">Learn more</a>
				</div>
				<div class="col-6">
					<a class="carousel-control-prev" href="#exampleHero" role="button" data-slide="prev">
						<span class="carousel-control-prev-icon" aria-hidden="true"></span>
						<span class="sr-only">Previous slide</span>
					</a>
					<a class="carousel-control-next" href="#exampleHero" role="button" data-slide="next">
						<span class="carousel-control-next-icon" aria-hidden="true"></span>
						<span class="sr-only">Next slide</span>
					</a>
					<figure class="overflow-hidden rounded m-0 my-2">
						<img src="https://cdn.modyo.cloud/uploads/c1eb380f-8204-4ef2-b119-cb8c3d415cb7/original/example_2.jpg" alt="People working at a table">
					</figure>
				</div>
			</div>
		</div>
	</div>
</div>

Banners

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

<div class="jumbotron text-white bg-cover" style="background-image: linear-gradient(to bottom, rgba(77, 79, 84, .6) 0%, rgba(77, 79, 84, .9) 100%), url(https://cdn.modyo.cloud/uploads/c1eb380f-8204-4ef2-b119-cb8c3d415cb7/original/example_2.jpg);">
	<h2 class="display-4 font-weight-bold">Hello, world!</h2>
	<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
	<hr class="my-4">
	<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
	<a class="btn btn-primary" href="#" role="button">Learn more</a>
</div>

Hello, world!

This is a simple hero unit, a simple jumbotron-style component.

Learn more

<div class="row no-gutters align-items-center border shadow rounded overflow-hidden">
	<figure class="col-12 col-lg-6 m-0">
		<img src="https://cdn.modyo.cloud/uploads/c1eb380f-8204-4ef2-b119-cb8c3d415cb7/original/example_2.jpg" alt="People working at a table">
	</figure>
	<div class="col-12 col-lg-6 p-5">
		<h2 class="display-4 font-weight-bold">Hello, world!</h2>
		<p class="lead">This is a simple hero unit, a simple jumbotron-style component.</p>
		<a class="btn btn-primary" href="#" role="button">Learn more</a>
	</div>
</div>

Cards

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<div class="row">
	<div class="col-12 col-md-4">
		<div class="card border rounded overflow-hidden">
			<figure class="m-0">
				<img src="https://cdn.modyo.cloud/uploads/ac8bd256-d026-43cd-97df-2f975fa3fdde/original/example.jpg" alt="People working at a table">
			</figure>
			<figcaption class="card-body">
				<h3 class="h5 card-title font-weight-bold">Card title</h3>
				<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				<a href="#" class="btn btn-primary">Go somewhere</a>
			</figcaption>
		</div>
	</div>
	<div class="col-12 col-md-4">
		<div class="card border rounded overflow-hidden">
			<figure class="m-0">
				<img src="https://cdn.modyo.cloud/uploads/ac8bd256-d026-43cd-97df-2f975fa3fdde/original/example.jpg" alt="People working at a table">
			</figure>
			<figcaption class="card-body">
				<h3 class="h5 card-title font-weight-bold">Card title</h3>
				<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				<a href="#" class="btn btn-primary">Go somewhere</a>
			</figcaption>
		</div>
	</div>
	<div class="col-12 col-md-4">
		<div class="card border rounded overflow-hidden">
			<figure class="m-0">
				<img src="https://cdn.modyo.cloud/uploads/ac8bd256-d026-43cd-97df-2f975fa3fdde/original/example.jpg" alt="People working at a table">
			</figure>
			<figcaption class="card-body">
				<h3 class="h5 card-title font-weight-bold">Card title</h3>
				<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				<a href="#" class="btn btn-primary">Go somewhere</a>
			</figcaption>
		</div>
	</div>
</div>

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<div class="row">
	<div class="col-12 col-md-4">
		<div class="card border rounded overflow-hidden card_icon">
			<figure class="m-0 pb-0 card-body justify-content-start d-flex">
				<div class="bg-secondary rounded-circle text-white justify-content-center p-3">
					<svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M9 21.5L17.5 13L13 10L15 2.5L6.5 11L11 14L9 21.5Z" fill="currentColor"></path>
					</svg>
				</div>
			</figure>
			<figcaption class="card-body">
				<h3 class="h5 card-title">Card title</h3>
				<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				<a href="#" class="btn btn-primary">Go somewhere</a>
			</figcaption>
		</div>
	</div>
	<div class="col-12 col-md-4">
		<div class="card border rounded overflow-hidden card_icon">
			<figure class="m-0 pb-0 card-body justify-content-start d-flex">
				<div class="bg-secondary rounded-circle text-white justify-content-center p-3">
					<svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M9 21.5L17.5 13L13 10L15 2.5L6.5 11L11 14L9 21.5Z" fill="currentColor"></path>
					</svg>
				</div>
			</figure>
			<figcaption class="card-body">
				<h3 class="h5 card-title">Card title</h3>
				<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				<a href="#" class="btn btn-primary">Go somewhere</a>
			</figcaption>
		</div>
	</div>
	<div class="col-12 col-md-4">
		<div class="card border rounded overflow-hidden card_icon">
			<figure class="m-0 pb-0 card-body justify-content-start d-flex">
				<div class="bg-secondary rounded-circle text-white justify-content-center p-3">
					<svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M9 21.5L17.5 13L13 10L15 2.5L6.5 11L11 14L9 21.5Z" fill="currentColor"></path>
					</svg>
				</div>
			</figure>
			<figcaption class="card-body">
				<h3 class="h5 card-title">Card title</h3>
				<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
				<a href="#" class="btn btn-primary">Go somewhere</a>
			</figcaption>
		</div>
	</div>
</div>

Post lists

Tue, May 21, 24

Hello, world!

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn more

Tue, May 21, 24

Hello, world!

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn more

Tue, May 21, 24

Hello, world!

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Learn more

<div>
	<div class="row no-gutters border shadow-sm rounded overflow-hidden mb-4">
		<figure class="col-12 col-lg-5 m-0">
			<img src="https://cdn.modyo.cloud/uploads/c1eb380f-8204-4ef2-b119-cb8c3d415cb7/original/example_2.jpg" alt="People working at a table">
		</figure>
		<div class="col-12 col-lg-7 p-4">
			<small class="text-muted">Tue, Apr 06, 21</small>
			<h4 class="font-weight-bold">Hello, world!</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			<a href="#">Learn more</a>
		</div>
	</div>
	<div class="row no-gutters border shadow-sm rounded overflow-hidden mb-4">
		<figure class="col-12 col-lg-5 m-0">
			<img src="https://cdn.modyo.cloud/uploads/c1eb380f-8204-4ef2-b119-cb8c3d415cb7/original/example_2.jpg" alt="People working at a table">
		</figure>
		<div class="col-12 col-lg-7 p-4">
			<small class="text-muted">Tue, Apr 06, 21</small>
			<h4 class="font-weight-bold">Hello, world!</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			<a href="#">Learn more</a>
		</div>
	</div>
	<div class="row no-gutters border shadow-sm rounded overflow-hidden mb-4">
		<figure class="col-12 col-lg-5 m-0">
			<img src="https://cdn.modyo.cloud/uploads/c1eb380f-8204-4ef2-b119-cb8c3d415cb7/original/example_2.jpg" alt="People working at a table">
		</figure>
		<div class="col-12 col-lg-7 p-4">
			<small class="text-muted">Tue, Apr 06, 21</small>
			<h4 class="font-weight-bold">Hello, world!</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
			<a href="#">Learn more</a>
		</div>
	</div>
</div>

<aside class="col-12 col-md-5">
	<div class="row border-bottom mb-4 pb-4">
		<div class="col-3 text-center">
			<span class="text-center text-primary">
				<b class="font-weight-bold h2 d-block mb-0">06</b>
				<span class="h4 text-uppercase">Apr</span>
			</span>
		</div>
		<div class="col-9">
			<h4 class="font-weight-bold">Hello, world!</h4>
			<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget elit dapibus, ullamcorper.</p>
			<a href="#">Learn more</a>
		</div>
	</div>
	<div class="row border-bottom mb-4 pb-4">
		<div class="col-3 text-center">
			<span class="text-center text-primary">
				<b class="font-weight-bold h2 d-block mb-0">06</b>
				<span class="h4 text-uppercase">Apr</span>
			</span>
		</div>
		<div class="col-9">
			<h4 class="font-weight-bold">Hello, world!</h4>
			<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget elit dapibus, ullamcorper.</p>
			<a href="#">Learn more</a>
		</div>
	</div>
	<div class="row border-bottom mb-4 pb-4">
		<div class="col-3 text-center">
			<span class="text-center text-primary">
				<b class="font-weight-bold h2 d-block mb-0">06</b>
				<span class="h4 text-uppercase">Apr</span>
			</span>
		</div>
		<div class="col-9">
			<h4 class="font-weight-bold">Hello, world!</h4>
			<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget elit dapibus, ullamcorper.</p>
			<a href="#">Learn more</a>
		</div>
	</div>
</aside>

Testimonial

Nulla eget justo consectetur, sagittis orci nec, tempus justo. Aliquam vel libero et ex.

Hannah Smith

Product Designer

<div class="quote pt-5">
	<div class="border">
		<div class="pl-5 quote_icon d-flex justify-content-start">
			<span class="p-4 bg-primary text-white rounded-circle d-flex justify-content-center align-items-center">
				<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="m29.448298,27.368956l0,-12l-8,0c0,-4.41 3.586,-8 8,-8l0,-4c-6.617,0 -12,5.383 -12,12l0,12l12,0z" fill="currentColor" />
					<path d="m12.606922,27.368956l0,-12l-8,0c0,-4.41 3.586,-8 8,-8l0,-4c-6.617,0 -12,5.383 -12,12l0,12l12,0z" fill="currentColor" />
				</svg>
			</span>
		</div>
		<div class="p-5">
			<h3 class="text-dark h1 m-0 font-weight-bold">Nulla eget justo consectetur, sagittis orci nec, tempus justo. Aliquam vel libero et ex.</h3>
			<hr class="my-4">
			<figure class="rounded-circle overflow-hidden border border-light" style="width: 50px;">
				<img src="https://cdn.modyo.cloud/uploads/41a0c07e-4114-41b8-90a4-eeba133bf931/original/avatars.jpg" alt="Hannah Smith Avatar">
			</figure>
			<h4 class="m-0">Hannah Smith</h4>
			<small class="text-muted">Product Designer</small>
		</div>
	</div>
</div>

Nulla eget justo consectetur, sagittis orci nec, tempus justo. Aliquam vel libero et ex.

Hannah Smith

Product Designer

<div class="quote py-5">
	<div class="d-flex justify-content-center">
		<span class="text-primary d-flex justify-content-center align-items-center">
			<svg
					 width="70"
					 height="70"
					 viewBox="0 0 30 30"
					 fill="none"
					 xmlns="http://www.w3.org/2000/svg"
					 >
				<path d="m29.448298,27.368956l0,-12l-8,0c0,-4.41 3.586,-8 8,-8l0,-4c-6.617,0 -12,5.383 -12,12l0,12l12,0z" fill="currentColor" />
				<path d="m12.606922,27.368956l0,-12l-8,0c0,-4.41 3.586,-8 8,-8l0,-4c-6.617,0 -12,5.383 -12,12l0,12l12,0z" fill="currentColor" />
			</svg>
		</span>
	</div>
	<div class="pt-4">
		<h3 class="text-dark h1 m-0 font-weight-bold text-center">	Nulla eget justo consectetur, sagittis orci nec, tempus justo. Aliquam vel libero et ex.</h3>
		<hr class="my-5 col-3">
		<figure class="mx-auto rounded-circle overflow-hidden border border-light" style="width: 50px;">
			<img src="https://cdn.modyo.cloud/uploads/41a0c07e-4114-41b8-90a4-eeba133bf931/original/avatars.jpg" alt="Hannah Smith Avatar">
		</figure>
		<h4 class="m-0 text-center">	Hannah Smith</h4>
		<small class="d-block text-muted text-center">	Product Designer</small>
	</div>
</div>

Text and image block

This is a example title

Some quick example text to build on the card title and make up the bulk of the card's content.

This is a example title

Some quick example text to build on the card title and make up the bulk of the card's content.

<div>
	<div class="row d-flex justify-content-center align-items-center mb-4">
		<div class="col-12 col-md-4">
			<figure class="m-0">
				<img src="https://cdn.modyo.cloud/uploads/ac8bd256-d026-43cd-97df-2f975fa3fdde/original/example.jpg" alt="People working" class="rounded shadow">
			</figure>
		</div>
		<div class="col-12 col-md-6 py-3">
			<h2>	This is a example title</h2>
			<p>	Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
	</div>
	<div class="row d-flex justify-content-center align-items-center mb-4">
		<div class="col-12 col-md-6 order-2 order-md-1">
			<h2>	This is a example title</h2>
			<p>	Some quick example text to build on the card title and make up the bulk of the card's content.</p>
		</div>
		<div class="col-12 col-md-4 order-1 order-md-2 py-3">
			<figure class="m-0">
				<img src="https://cdn.modyo.cloud/uploads/ac8bd256-d026-43cd-97df-2f975fa3fdde/original/example.jpg" alt="Another image of people working" class="rounded shadow">
			</figure>
		</div>
	</div>
</div>

Collapse

Link with href

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

<div>
	<p>
		<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
			Link with href
		</a>
		<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
			Button with data-target
		</button>
	</p>
	<div class="collapse" id="collapseExample">
		<div class="card card-body">
			Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
		</div>
	</div>
</div>

Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

<div class="accordion mb-5 accordion-icon" id="accordionExample">
	<div class="card">
		<div class="card-header p-0" id="headingOne">
			<button class="btn btn-light btn-block btn-lg text-left rounded-0 d-flex align-items-center justify-content-between" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
				Collapsible Group Item #1
			</button>
		</div>

		<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
			<div class="card-body">
				<p class="m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
			</div>
		</div>
	</div>
	<div class="card">
		<div class="card-header p-0" id="headingTwo">
			<button class="btn btn-light btn-block btn-lg text-left collapsed rounded-0 d-flex align-items-center justify-content-between" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
				Collapsible Group Item #2
			</button>
		</div>
		<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
			<div class="card-body">
				<p class="m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
			</div>
		</div>
	</div>
	<div class="card">
		<div class="card-header p-0" id="headingThree">
			<button class="btn btn-light btn-block btn-lg text-left collapsed rounded-0 d-flex align-items-center justify-content-between" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
				Collapsible Group Item #3
			</button>
		</div>
		<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
			<div class="card-body">
				<p class="m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
			</div>
		</div>
	</div>
</div>

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta, massa sed maximus scelerisque, eros tortor dapibus est, eget laoreet purus tellus vitae nunc. Proin eleifend vulputate metus, vitae mattis libero tincidunt nec. Integer lacinia elit metus, ac tincidunt leo luctus nec. Proin semper feugiat turpis sit amet pulvinar. Phasellus gravida sodales nibh ac accumsan. Fusce non turpis risus. Nulla fringilla tristique nisl, sit amet maximus nisi consequat vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce ac dui leo. Curabitur a rutrum nulla. Integer ipsum tortor, congue interdum pharetra nec, sagittis et libero. Nulla consectetur, arcu quis convallis vehicula, lorem libero porttitor nunc, ac aliquet ligula nulla id sem. Suspendisse potenti. Quisque sed volutpat nisl, quis elementum magna. Curabitur varius non massa quis consequat.

Sed feugiat convallis massa, eu ultrices metus gravida ut. Quisque nec leo at massa facilisis aliquam rhoncus sit amet turpis. In a sem ac neque malesuada vulputate quis sit amet massa. Vestibulum euismod consequat feugiat. Ut suscipit nulla lectus, vel finibus est mollis vulputate. Proin congue feugiat metus sed sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nunc enim, aliquam nec justo eget, convallis ultrices erat. Duis imperdiet fringilla justo quis mattis. Nam eu ultricies elit. Curabitur nisi magna, finibus eget interdum non, aliquet vitae augue. Quisque non ligula massa.

Cras ut tortor in ante consectetur tempus. Cras viverra neque dui, nec cursus augue maximus ut. Curabitur dictum elit nulla, quis molestie quam faucibus in. Donec vitae ipsum facilisis, molestie leo nec, vehicula dui. Sed a sem nisl. Fusce semper ipsum vel tempus rutrum. Pellentesque convallis nisl dolor, eget maximus ipsum pulvinar ut. Praesent felis massa, ultricies a fringilla rutrum, auctor elementum augue. Proin aliquam enim vitae neque condimentum porttitor. Morbi dignissim mauris eros, ut gravida leo tempor sed. Ut condimentum turpis nec libero auctor dapibus. Nulla facilisi. Maecenas ac lacinia dolor, at mollis ligula. Suspendisse sed finibus lorem, nec convallis metus. Donec id lacinia mauris, ac ornare massa.

<div>
	<ul class="nav nav-tabs" id="myTab" role="tablist">
		<li class="nav-item me-2" role="presentation">
			<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home1" role="tab" aria-controls="home" aria-selected="true">Home</a>
		</li>
		<li class="nav-item me-2" role="presentation">
			<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile1" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
		</li>
		<li class="nav-item me-2" role="presentation">
			<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact1" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
		</li>
	</ul>
	<div class="tab-content p-4 border-left border-bottom border-right" id="myTabContent">
		<div class="tab-pane fade show active" id="home1" role="tabpanel" aria-labelledby="home-tab">
			<p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta, massa sed maximus scelerisque, eros tortor dapibus est, eget laoreet purus tellus vitae nunc. Proin eleifend vulputate metus, vitae mattis libero tincidunt nec. Integer lacinia elit metus, ac tincidunt leo luctus nec. Proin semper feugiat turpis sit amet pulvinar. Phasellus gravida sodales nibh ac accumsan. Fusce non turpis risus. Nulla fringilla tristique nisl, sit amet maximus nisi consequat vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce ac dui leo. Curabitur a rutrum nulla. Integer ipsum tortor, congue interdum pharetra nec, sagittis et libero. Nulla consectetur, arcu quis convallis vehicula, lorem libero porttitor nunc, ac aliquet ligula nulla id sem. Suspendisse potenti. Quisque sed volutpat nisl, quis elementum magna. Curabitur varius non massa quis consequat.</p>
		</div>
		<div class="tab-pane fade" id="profile1" role="tabpanel" aria-labelledby="profile-tab">
			<p class="m-0">Sed feugiat convallis massa, eu ultrices metus gravida ut. Quisque nec leo at massa facilisis aliquam rhoncus sit amet turpis. In a sem ac neque malesuada vulputate quis sit amet massa. Vestibulum euismod consequat feugiat. Ut suscipit nulla lectus, vel finibus est mollis vulputate. Proin congue feugiat metus sed sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nunc enim, aliquam nec justo eget, convallis ultrices erat. Duis imperdiet fringilla justo quis mattis. Nam eu ultricies elit. Curabitur nisi magna, finibus eget interdum non, aliquet vitae augue. Quisque non ligula massa.</p>
		</div>
		<div class="tab-pane fade" id="contact1" role="tabpanel" aria-labelledby="contact-tab">
			<p class="m-0">Cras ut tortor in ante consectetur tempus. Cras viverra neque dui, nec cursus augue maximus ut. Curabitur dictum elit nulla, quis molestie quam faucibus in. Donec vitae ipsum facilisis, molestie leo nec, vehicula dui. Sed a sem nisl. Fusce semper ipsum vel tempus rutrum. Pellentesque convallis nisl dolor, eget maximus ipsum pulvinar ut. Praesent felis massa, ultricies a fringilla rutrum, auctor elementum augue. Proin aliquam enim vitae neque condimentum porttitor. Morbi dignissim mauris eros, ut gravida leo tempor sed. Ut condimentum turpis nec libero auctor dapibus. Nulla facilisi. Maecenas ac lacinia dolor, at mollis ligula. Suspendisse sed finibus lorem, nec convallis metus. Donec id lacinia mauris, ac ornare massa.</p>
		</div>
	</div>
</div>

Home Profile Messages Settings

Quisque cursus sapien et augue scelerisque interdum. Sed feugiat risus quis nisl sodales sagittis. Fusce efficitur hendrerit est, et accumsan arcu mattis eu. Donec fringilla efficitur pulvinar. Integer eget purus metus. Aliquam erat volutpat. Nullam mi risus, lobortis id ex id, scelerisque tristique neque. Duis vel nibh magna. In hac habitasse platea dictumst. Donec quis sem et urna ullamcorper convallis.

<div class="row">
	<div class="col-3">
		<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
			<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
			<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
			<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
			<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
		</div>
	</div>
	<div class="col-9">
		<div class="tab-content" id="v-pills-tabContent">
			<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
				<p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta, massa sed maximus scelerisque, eros tortor dapibus est, eget laoreet purus tellus vitae nunc. Proin eleifend vulputate metus, vitae mattis libero tincidunt nec. Integer lacinia elit metus, ac tincidunt leo luctus nec. Proin semper feugiat turpis sit amet pulvinar. Phasellus gravida sodales nibh ac accumsan. Fusce non turpis risus. Nulla fringilla tristique nisl, sit amet maximus nisi consequat vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce ac dui leo. Curabitur a rutrum nulla. Integer ipsum tortor, congue interdum pharetra nec, sagittis et libero. Nulla consectetur, arcu quis convallis vehicula, lorem libero porttitor nunc, ac aliquet ligula nulla id sem. Suspendisse potenti. Quisque sed volutpat nisl, quis elementum magna. Curabitur varius non massa quis consequat.</p>
			</div>
			<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
				<p class="m-0">Sed feugiat convallis massa, eu ultrices metus gravida ut. Quisque nec leo at massa facilisis aliquam rhoncus sit amet turpis. In a sem ac neque malesuada vulputate quis sit amet massa. Vestibulum euismod consequat feugiat. Ut suscipit nulla lectus, vel finibus est mollis vulputate. Proin congue feugiat metus sed sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nunc enim, aliquam nec justo eget, convallis ultrices erat. Duis imperdiet fringilla justo quis mattis. Nam eu ultricies elit. Curabitur nisi magna, finibus eget interdum non, aliquet vitae augue. Quisque non ligula massa.</p>
			</div>
			<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
				<p class="m-0">Cras ut tortor in ante consectetur tempus. Cras viverra neque dui, nec cursus augue maximus ut. Curabitur dictum elit nulla, quis molestie quam faucibus in. Donec vitae ipsum facilisis, molestie leo nec, vehicula dui. Sed a sem nisl. Fusce semper ipsum vel tempus rutrum. Pellentesque convallis nisl dolor, eget maximus ipsum pulvinar ut. Praesent felis massa, ultricies a fringilla rutrum, auctor elementum augue. Proin aliquam enim vitae neque condimentum porttitor. Morbi dignissim mauris eros, ut gravida leo tempor sed. Ut condimentum turpis nec libero auctor dapibus. Nulla facilisi. Maecenas ac lacinia dolor, at mollis ligula. Suspendisse sed finibus lorem, nec convallis metus. Donec id lacinia mauris, ac ornare massa.</p>
			</div>
			<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
				<p class="m-0">Quisque cursus sapien et augue scelerisque interdum. Sed feugiat risus quis nisl sodales sagittis. Fusce efficitur hendrerit est, et accumsan arcu mattis eu. Donec fringilla efficitur pulvinar. Integer eget purus metus. Aliquam erat volutpat. Nullam mi risus, lobortis id ex id, scelerisque tristique neque. Duis vel nibh magna. In hac habitasse platea dictumst. Donec quis sem et urna ullamcorper convallis.</p>
			</div>
		</div>
	</div>
</div>

<div>
	<ul class="nav nav-pills" id="myTab" role="tablist">
		<li class="nav-item" role="presentation">
			<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
		</li>
		<li class="nav-item" role="presentation">
			<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
		</li>
		<li class="nav-item" role="presentation">
			<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
		</li>
	</ul>
	<div class="tab-content mt-3" id="myTabContent">
		<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
			<p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta, massa sed maximus scelerisque, eros tortor dapibus est, eget laoreet purus tellus vitae nunc. Proin eleifend vulputate metus, vitae mattis libero tincidunt nec. Integer lacinia elit metus, ac tincidunt leo luctus nec. Proin semper feugiat turpis sit amet pulvinar. Phasellus gravida sodales nibh ac accumsan. Fusce non turpis risus. Nulla fringilla tristique nisl, sit amet maximus nisi consequat vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce ac dui leo. Curabitur a rutrum nulla. Integer ipsum tortor, congue interdum pharetra nec, sagittis et libero. Nulla consectetur, arcu quis convallis vehicula, lorem libero porttitor nunc, ac aliquet ligula nulla id sem. Suspendisse potenti. Quisque sed volutpat nisl, quis elementum magna. Curabitur varius non massa quis consequat.</p>
		</div>
		<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
			<p class="m-0">Sed feugiat convallis massa, eu ultrices metus gravida ut. Quisque nec leo at massa facilisis aliquam rhoncus sit amet turpis. In a sem ac neque malesuada vulputate quis sit amet massa. Vestibulum euismod consequat feugiat. Ut suscipit nulla lectus, vel finibus est mollis vulputate. Proin congue feugiat metus sed sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nunc enim, aliquam nec justo eget, convallis ultrices erat. Duis imperdiet fringilla justo quis mattis. Nam eu ultricies elit. Curabitur nisi magna, finibus eget interdum non, aliquet vitae augue. Quisque non ligula massa.</p>
		</div>
		<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
			<p class="m-0">Cras ut tortor in ante consectetur tempus. Cras viverra neque dui, nec cursus augue maximus ut. Curabitur dictum elit nulla, quis molestie quam faucibus in. Donec vitae ipsum facilisis, molestie leo nec, vehicula dui. Sed a sem nisl. Fusce semper ipsum vel tempus rutrum. Pellentesque convallis nisl dolor, eget maximus ipsum pulvinar ut. Praesent felis massa, ultricies a fringilla rutrum, auctor elementum augue. Proin aliquam enim vitae neque condimentum porttitor. Morbi dignissim mauris eros, ut gravida leo tempor sed. Ut condimentum turpis nec libero auctor dapibus. Nulla facilisi. Maecenas ac lacinia dolor, at mollis ligula. Suspendisse sed finibus lorem, nec convallis metus. Donec id lacinia mauris, ac ornare massa.</p>
		</div>
	</div>
</div>

Dropdowns

<!-- /btn -->
<div class="btn-group mb-3">
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
	<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform;">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	</div>
</div>

<!-- /btn-group -->
<div class="btn-group me-2 mb-3">
	<button type="button" class="btn btn-primary">Primary</button>
	<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Toggle Dropdown</span>
	</button>
	<div class="dropdown-menu" style="">
		<a class="dropdown-item" href="#">Action</a>
		<a class="dropdown-item" href="#">Another action</a>
		<a class="dropdown-item" href="#">Something else here</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item" href="#">Separated link</a>
	</div>
</div>

List group

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group mb-4">
	<li class="list-group-item">Cras justo odio</li>
	<li class="list-group-item">Dapibus ac facilisis in</li>
	<li class="list-group-item">Morbi leo risus</li>
	<li class="list-group-item">Porta ac consectetur ac</li>
	<li class="list-group-item">Vestibulum at eros</li>
</ul>

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group mb-5">
	<li class="list-group-item active">Cras justo odio</li>
	<li class="list-group-item">Dapibus ac facilisis in</li>
	<li class="list-group-item">Morbi leo risus</li>
	<li class="list-group-item">Porta ac consectetur ac</li>
	<li class="list-group-item">Vestibulum at eros</li>
</ul>

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

<ul class="list-group list-group-flush mb-4">
	<li class="list-group-item">Cras justo odio</li>
	<li class="list-group-item">Dapibus ac facilisis in</li>
	<li class="list-group-item">Morbi leo risus</li>
	<li class="list-group-item">Porta ac consectetur ac</li>
	<li class="list-group-item">Vestibulum at eros</li>
</ul>

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus

<ul class="list-group list-group-horizontal mb-4">
	<li class="list-group-item">Cras justo odio</li>
	<li class="list-group-item">Dapibus ac facilisis in</li>
	<li class="list-group-item">Morbi leo risus</li>
</ul>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
	Launch demo modal
</button>

<!-- Modal -->
<div class="modal_img modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg modal-dialog-centered">
		<div class="modal-content">
			<div class="modal-header bg-white border-0 p-0">
				<img src="https://cdn.modyo.cloud/uploads/8238bc7e-a70f-4d90-8012-d9841fab1025/original/example3.jpg" alt="People working">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">✕</span>
				</button>
			</div>
			<div class="modal-body p-4">
				<h3 id="exampleModalLabel">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h3>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>

Panel

<!-- Button trigger right panel -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#examplePanelR">
	Launch right panel
</button>

<!-- Right Panel -->
<div class="modal modal_img right fade" id="examplePanelL" tabindex="-1" aria-labelledby="examplePanelRightLabel" style="display: none;" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header bg-white border-0 p-0">
				<img src="https://cdn.modyo.cloud/uploads/8238bc7e-a70f-4d90-8012-d9841fab1025/original/example3.jpg" alt="People working">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">✕</span>
				</button>
			</div>
			<div class="modal-body p-4">
				<h3 id="examplePanelRightLabel">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h3>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
			</div>
			<div class="modal-footer p-4">
				<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>

<!-- Button trigger right panel -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#examplePanelL">
	Launch left panel
</button>

<!-- Left Panel -->
<div class="modal modal_img left fade" id="examplePanelR" tabindex="-1" aria-labelledby="examplePanelLeftLabel" style="display: none;" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header bg-white border-0 p-0">
				<img src="https://cdn.modyo.cloud/uploads/8238bc7e-a70f-4d90-8012-d9841fab1025/original/example3.jpg" alt="People working">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">✕</span>
				</button>
			</div>
			<div class="modal-body p-4">
				<h3 id="examplePanelLeftLabel">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</h3>
				<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
			</div>
			<div class="modal-footer p-4">
				<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>

Some examples and components of the Minimal theme

Hero

Hello, world!

Hello, world!

Hello, world!

Banners

Hello, world!

Hello, world!

Cards

Card title

Card title

Card title

Card title

Card title

Card title

Post lists

Hello, world!

Hello, world!

Hello, world!

Testimonial

Nulla eget justo consectetur, sagittis orci nec, tempus justo. Aliquam vel libero et ex.

Hannah Smith

Nulla eget justo consectetur, sagittis orci nec, tempus justo. Aliquam vel libero et ex.

Hannah Smith

Text and image block

This is a example title

This is a example title

Collapse

Accordion

Tabs

Dropdowns

List group

Modal

Panel