Some examples and components
This site is based on Bootstrap 4.6, meaning you can use all the components available in this version of Bootstrap. Modyo widgets display dynamic content by using the platform's own version of Shopify's Liquid SDK. Visit Modyo docs to learn how to connect widgets with content.
Icons
Click on any icon to copy to clipboard.
Light Icons
Category Icons
Brand Icons
Typography
Title helpers
This is a Title
This is a Subtitle
<p class="pcf-title">Title</p>
<p class="pcf-subtitle">Subtitle</p>
Paragraphs
Paragraph: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
Sub Paragraph: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
Small Paragraph: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
<p>Paragraph: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies
nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis
pretium.</p>
<p class="p-sm mt-2">Sub Paragraph: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
dictum felis eu pede mollis pretium.</p>
<p class="p-xs mt-2">Small Paragraph: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
dictum felis eu pede mollis pretium.</p>
Colors
Verde
Dark
#28C064
var(--green-dark)
Normal
#43D87E
var(--green-normal)
Semilight
#51EE8F
var(--green-semilight)
Light
#83FFB4
var(--green-light)
Extralight
#C2FFDA
var(--green-extralight)
Superlight
#F1FFF7
var(--green-superlight)
Buttons
Primary button
<button class="pcf-btn pcf-btn--primary pcf-btn--sm mr-3">Small</button>
<button class="pcf-btn pcf-btn--primary mr-3">Medium</button>
<button class="pcf-btn pcf-btn--primary pcf-btn--lg">Large</button>
Secondary button
<button class="pcf-btn pcf-btn--secondary pcf-btn--sm mr-3">Small</button>
<button class="pcf-btn pcf-btn--secondary mr-3">Medium</button>
<button class="pcf-btn pcf-btn--secondary pcf-btn--lg">Large</button>
Tertiary button
<button class="pcf-btn pcf-btn--tertiary pcf-btn--sm mr-3">Small</button>
<button class="pcf-btn pcf-btn--tertiary mr-3">Medium</button>
<button class="pcf-btn pcf-btn--tertiary pcf-btn--lg">Large</button>
Quaternary button
<button class="pcf-btn pcf-btn--quaternary pcf-btn--sm mr-3">Small</button>
<button class="pcf-btn pcf-btn--quaternary mr-3">Medium</button>
<button class="pcf-btn pcf-btn--quaternary pcf-btn--lg">Large</button>
Link button
<a href="#" class="pcf-link-btn pcf-btn--sm mr-3">Small</a>
<a href="#" class="pcf-link-btn mr-3">Medium</a>
<a href="#" class="pcf-link-btn pcf-btn--lg mr-3">Large</a>
Box shadows
Small
hover me
with error state
with success state
<div class="pcf-box-shadow--sm p-3 mr-5">hover me</div>
<div class="pcf-box-shadow--sm pcf-box-shadow--sm--error p-3 mr-5">with error state</div>
<div class="pcf-box-shadow--sm pcf-box-shadow--sm--success p-3">with success state</div>
Normal
hover me
with error state
with success state
<div class="pcf-box-shadow p-3 mr-5">hover me</div>
<div class="pcf-box-shadow pcf-box-shadow--error p-3 mr-5">with error state</div>
<div class="pcf-box-shadow pcf-box-shadow--success p-3">with success state</div>
Form fields
Input
<input type="email" class="form-control pcf-input">
Checkbox
<div class="form-check custom-control custom-checkbox pcf-checkbox">
<input type="checkbox" class="form-check-input custom-control-input custom-control-input" id="customCheck1">
<label class="form-check-label custom-control-label custom-control-label" for="customCheck1">
Promociones y ofertas
</label>
</div>
Select Dropdown
<div class="dropdown show pcf-select__dropdown">
<a class="pcf-select__dropdown__btn dropdown-toggle" href="#" role="button" id="dropdownStore" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Selecciona una Tienda
{ % include 'icon' , icon: 'chevron-down', small: true % }
</a>
<div class="dropdown-menu" aria-labelledby="dropdownStore">
<a class="dropdown-item" href="#">Opción 1</a>
<a class="dropdown-item" href="#">Opción 2</a>
<a class="dropdown-item" href="#">Opción 3</a>
</div>
</div>
<div class="dropdown show pcf-select__dropdown pcf-select__dropdown--scrollable">
<a class="pcf-select__dropdown__btn dropdown-toggle" href="#" role="button" id="dropdownStore" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Selecciona una Tienda
{ % include 'icon' , icon: 'chevron-down', small: true % }
</a>
<div class="dropdown-menu" aria-labelledby="dropdownStore">
<a class="dropdown-item" href="#">Agustinas</a>
<a class="dropdown-item dropdown-item--through" href="#">Antofagasta</a>
<a class="dropdown-item" href="#">Calama (Mall Plaza)</a>
<a class="dropdown-item" href="#">Cantagallo</a>
<a class="dropdown-item" href="#">Chillán</a>
<a class="dropdown-item dropdown-item--through" href="#">Concepción</a>
<a class="dropdown-item" href="#">Copiapó</a>
</div>
</div>
Loader
{% snippet "loader" %}
Hero
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Learn moreHello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Learn moreHello, 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://cloud.modyocdn.com/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://cloud.modyocdn.com/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://cloud.modyocdn.com/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://cloud.modyocdn.com/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>
<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://cloud.modyocdn.com/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://cloud.modyocdn.com/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://cloud.modyocdn.com/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://cloud.modyocdn.com/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 somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard 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
<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://cloud.modyocdn.com/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://cloud.modyocdn.com/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://cloud.modyocdn.com/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>Collapse
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
<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 mr-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 mr-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 mr-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>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.
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>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-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 mr-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>Modal
<!-- 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://cloud.modyocdn.com/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://cloud.modyocdn.com/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://cloud.modyocdn.com/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>Page Header
media-title--bg-secondary
Centro de ayuda
<div class="media media-title w-100 media-title--bg-secondary">
<div class="row mx-0 w-100 align-items-center">
<div class="col-12 col-lg-8 d-flex align-items-center">
<div class="icon-title">
{ % include 'icon' , icon: 'arrow-left' % }
</div>
<h1 class="my-0 text-left">Centro de ayuda</h1>
</div>
<div class="col-lg-3 d-none d-lg-flex justify-content-center">
<img src="https://d3okvk28mv0bs6.cloudfront.net/uploads/99dca0c1-49b9-460c-bcf1-030208108fcf/original/centro-de-ayuda.png" alt="Centro de ayuda">
</div>
</div>
</div> media-title--bg-primary
Centro de ayuda
<div class="media media-title w-100 media-title--bg-primary">
<div class="row mx-0 w-100 align-items-center">
<div class="col-12 col-lg-8 d-flex align-items-center">
<div class="icon-title">
{ % include 'icon' , icon: 'arrow-left' % }
</div>
<h1 class="my-0 text-left">Centro de ayuda</h1>
</div>
<div class="col-lg-3 d-none d-lg-flex justify-content-center">
<img src="https://d3okvk28mv0bs6.cloudfront.net/uploads/99dca0c1-49b9-460c-bcf1-030208108fcf/original/centro-de-ayuda.png" alt="Centro de ayuda">
</div>
</div>
</div> Breadcrumb
<div class="col-12 py-2 ">
<div class="breadcrumb">
<div class="breadcrumb-inner container">
<a class="first item-0 d-none d-lg-inline-flex" href="https://www.pcfactory.cl">Home</a>
<span class="separator d-none d-lg-inline-flex">/</span>
<a class="first item-2" href="https://www.pcfactory.cl/centro-de-ayuda/">Centro de ayuda</a>
<span class="separator">/</span>
{ % for itemCategory in categoriesCenterHelp % }
{ % if itemCategory.slug == entry.meta.category % }
<span class="last item-3"></span>
{ % endif % }
{ % endfor % }
</div>
</div>
</div>