Ui / Ux

Colors

brand-primary
brand-secondary
brand-success
brand-warning
brand-danger
brand-info
gray-base
gray-darker
gray-dark
gray
gray-light
gray-lighter

Alerts

Success

Aenean viverra rhoncus pede. Aliquam erat volutpat. Integer tincidunt. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem.

Warning

Aenean viverra rhoncus pede. Aliquam erat volutpat. Integer tincidunt. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem.

Danger

Aenean viverra rhoncus pede. Aliquam erat volutpat. Integer tincidunt. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem.

Info

Aenean viverra rhoncus pede. Aliquam erat volutpat. Integer tincidunt. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem.


<div class="alert alert-success">
  <p><strong>Success</strong></p>
  <p>Aenean viverra rhoncus pede. Aliquam erat volutpat. Integer tincidunt. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem.</p>
</div>

<div class="alert alert-warning">
  <p><strong>Warning</strong></p>
  <p>Aenean viverra rhoncus pede. Aliquam erat volutpat. Integer tincidunt. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem.</p>
</div>

<div class="alert alert-danger">
  <p><strong>Danger</strong></p>
  <p>Aenean viverra rhoncus pede. Aliquam erat volutpat. Integer tincidunt. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem.</p>
</div>

<div class="alert alert-info">
  <p><strong>Info</strong></p>
  <p>Aenean viverra rhoncus pede. Aliquam erat volutpat. Integer tincidunt. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem.</p>
</div>

Buttons

Plain buttons


<a class="btn btn-default">Default</a>
<a class="btn btn-primary">Primary</a>
<a class="btn btn-secondary">Secondary</a>
<a class="btn btn-info">Info</a>
<a class="btn btn-success">Success</a>
<a class="btn btn-warning">Warning</a>
<a class="btn btn-danger">Danger</a>

Buttons border


<a class="btn btn-default btn-border">Default</a>
<a class="btn btn-primary btn-border">Primary</a>
<a class="btn btn-secondary btn-border">Secondary</a>
<a class="btn btn-info btn-border">Info</a>
<a class="btn btn-success btn-border">Success</a>
<a class="btn btn-warning btn-border">Warning</a>
<a class="btn btn-danger btn-border">Danger</a>

White buttons


<a class="btn btn-white">White</a>
<a class="btn btn-white btn-border">White</a>

Button group

Btn 1 Btn 2 

<div class="btn-group">
  <a class="btn btn-primary">Btn 1</a>
  <a class="btn btn-primary btn-border">Btn 2</a>
</div>

Button sizes


<a class="btn btn-primary btn-xs">X-small</a>
<a class="btn btn-primary btn-sm">Small</a>
<a class="btn btn-primary">Normal</a>
<a class="btn btn-primary btn-lg">Large</a>

Button block

Block

<a class="btn btn-primary btn-block">Block</a>

Buttons icon


<a class="btn btn-primary btn-icon btn-sm">
  <svg>
    Html.Partial("_Sprite_SVG", "synchrone")
  </svg>
</a>

<a class="btn btn-primary btn-icon">
  <svg>
    Html.Partial("_Sprite_SVG", "synchrone")
  </svg>
</a>

<a class="btn btn-primary btn-icon btn-lg">
  <svg>
    Html.Partial("_Sprite_SVG", "synchrone")
  </svg>
</a>

Input groups


<div class="input-group input-group-sm">
  <input placeholder="Small" class="form-control" />
  <div class="input-group-btn">
    <a class="btn btn-primary" type="button">Btn</a>
  </div>
</div>

<div class="input-group">
  <input placeholder="Normal" class="form-control" />
  <div class="input-group-btn">
    <a class="btn btn-primary" type="button">Btn</a>
  </div>
</div>

<div class="input-group input-group-lg">
  <input placeholder="Large" class="form-control" />
  <div class="input-group-btn">
    <a class="btn btn-primary" type="button">Btn</a>
  </div>
</div>

Form

Form group

  • Message d'erreur
  • Message d'erreur
  • Message d'erreur 

<div class="form-group form-group-sm">
  <label class="control-label">Label</label>
  <input class="form-control" placeholder="Small">
  <span class="field-validation-error"><span class="">Message d'erreur</span></span>
</div>

<div class="form-group">
  <label class="control-label">Label</label>
  <input class="form-control" placeholder="Normal">
  <span class="field-validation-error"><span class="">Message d'erreur</span></span>
</div>

<div class="form-group form-group-lg">
  <label class="control-label">Label</label>
  <input class="form-control" placeholder="Large">
  <span class="field-validation-error"><span class="">Message d'erreur</span></span>
</div>

Grid form

Message d'erreur
Message d'erreur
Message d'erreur 

<div class="grid-form">
  <div class="form-group">
    <label class="control-label">Label</label>
    <input class="form-control" placeholder="Field 1">
    <span class="field-validation-error"><span class="">Message d'erreur</span></span>
  </div>

  <div class="form-group">
    <label class="control-label">Label</label>
    <select class="form-control" placeholder="Field select">
      <option></option>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
    </select>
    <span class="field-validation-error"><span class="">Message d'erreur</span></span>
  </div>

  <div class="form-group grid-form__full">
    <label class="control-label">Label</label>
    <textarea class="form-control" placeholder="Field textarea"></textarea>
    <span class="field-validation-error"><span class="">Message d'erreur</span></span>
  </div>
</div>

Checkbox


<div class="custom-checkbox">
  <label for="checkbox">
    <input id="checkbox" type="checkbox">
    <span class="custom-checkbox__box">
      <svg>
        Html.Partial("_Sprite_SVG", "check")
      </svg>
    </span>
    <span>Custom-checkbox with <a>a link</a></span>
  </label>
</div>


ou via l'Editor CheckBoxFor

Html.Editor("checkbox", "CheckBoxFor", "checkbox", new 
{
    text = "Custom checkbox"
})

Toggle


<div class="toggle-checkbox">
  <input id="toggleCheckbox" type="checkbox" />
  <label for="toggleCheckbox">Toggle checkbox</label>
</div>


ou via l'Editor CheckBoxFor

Html.Editor("toggleCheckbox", "CheckBoxFor", "toggleCheckbox", new 
{
    isToggle = true,
    text = "Toggle checkbox"
})

Radio check


<div class="radio-check">
  <input id="radioCheck" type="radio" />
  <label for="radioCheck">
    <span>Radio check</span>
  </label>
</div>

Labels

  • Default
  • Primary
  • Info
  • Success
  • Warning
  • Danger

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-info">Info</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

List Group

Default

  • Fusce neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Ut a nisl id ante tempus hendrerit. Donec sodales sagittis magna. Nam pretium turpis et arcu.
  • Lorem ipsum dolor
  • Lorem ipsum dolor

<ul class="list-group">
  <li class="list-group-item">Fusce neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Ut a nisl id ante tempus hendrerit. Donec sodales sagittis magna. Nam pretium turpis et arcu.</li>
  <li class="list-group-item">Lorem ipsum dolor</li>
  <li class="list-group-item">Lorem ipsum dolor</li>
</ul>

Link


<ul class="list-group">
  <a class="list-group-item">Fusce neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Ut a nisl id ante tempus hendrerit. Donec sodales sagittis magna. Nam pretium turpis et arcu.</a>
  <a class="list-group-item">Lorem ipsum dolor</a>
  <a class="list-group-item">Lorem ipsum dolor</a>
</ul>

Panel group

Panel group item 1

Fusce neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Ut a nisl id ante tempus hendrerit. Donec sodales sagittis magna. Nam pretium turpis et arcu.

Vivamus consectetuer hendrerit lacus. Ut a nisl id ante tempus hendrerit. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Morbi nec metus. In ac felis quis tortor malesuada pretium.

Fusce neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Ut a nisl id ante tempus hendrerit. Donec sodales sagittis magna. Nam pretium turpis et arcu.

Vivamus consectetuer hendrerit lacus. Ut a nisl id ante tempus hendrerit. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Morbi nec metus. In ac felis quis tortor malesuada pretium.

Fusce neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Ut a nisl id ante tempus hendrerit. Donec sodales sagittis magna. Nam pretium turpis et arcu.

Vivamus consectetuer hendrerit lacus. Ut a nisl id ante tempus hendrerit. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Morbi nec metus. In ac felis quis tortor malesuada pretium.


<div class="panel-group stack-text stack-text--2" id="panelGroupAccordion">
  <div class="panel">
    <a class="panel-heading panel-heading--collapse" data-toggle="collapse" data-parent="#panelGroupAccordion" data-target="#panelGroup1">Panel group item 1</a>
    <div class="panel-collapse collapse in" id="panelGroup1">
      <div class="panel-body">
        <p>Fusce neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Ut a nisl id ante tempus hendrerit. Donec sodales sagittis magna. Nam pretium turpis et arcu.</p>
        <p>Vivamus consectetuer hendrerit lacus. Ut a nisl id ante tempus hendrerit. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Morbi nec metus. In ac felis quis tortor malesuada pretium.</p>
      </div>
    </div>
  </div>

  <div class="panel">
    <a class="panel-heading panel-heading--collapse collapsed" data-toggle="collapse" data-parent="#panelGroupAccordion" data-target="#panelGroup2">Panel group item 2</a>
    <div class="panel-collapse collapse" id="panelGroup2">
      <div class="panel-body">
        <p>Fusce neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Ut a nisl id ante tempus hendrerit. Donec sodales sagittis magna. Nam pretium turpis et arcu.</p>
        <p>Vivamus consectetuer hendrerit lacus. Ut a nisl id ante tempus hendrerit. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Morbi nec metus. In ac felis quis tortor malesuada pretium.</p>
      </div>
    </div>
  </div>

  <div class="panel">
    <a class="panel-heading panel-heading--collapse collapsed" data-toggle="collapse" data-parent="#panelGroupAccordion" data-target="#panelGroup3">Panel group item 3</a>
    <div class="panel-collapse collapse" id="panelGroup3">
      <div class="panel-body">
        <p>Fusce neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Ut a nisl id ante tempus hendrerit. Donec sodales sagittis magna. Nam pretium turpis et arcu.</p>
        <p>Vivamus consectetuer hendrerit lacus. Ut a nisl id ante tempus hendrerit. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Morbi nec metus. In ac felis quis tortor malesuada pretium.</p>
      </div>
    </div>
  </div>
</div>

Tabs

Tab 1

Fusce neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Ut a nisl id ante tempus hendrerit. Donec sodales sagittis magna. Nam pretium turpis et arcu.

Vivamus consectetuer hendrerit lacus. Ut a nisl id ante tempus hendrerit. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Morbi nec metus. In ac felis quis tortor malesuada pretium.

Tab 2

Fusce neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Ut a nisl id ante tempus hendrerit. Donec sodales sagittis magna. Nam pretium turpis et arcu.

Vivamus consectetuer hendrerit lacus. Ut a nisl id ante tempus hendrerit. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Morbi nec metus. In ac felis quis tortor malesuada pretium.

Tab 3

Fusce neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Ut a nisl id ante tempus hendrerit. Donec sodales sagittis magna. Nam pretium turpis et arcu.

Vivamus consectetuer hendrerit lacus. Ut a nisl id ante tempus hendrerit. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Morbi nec metus. In ac felis quis tortor malesuada pretium.


<div>
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a data-target="#tab1" data-toggle="tab" role="tab">Tab 1</a></li>
    <li role="presentation"><a data-target="#tab2" data-toggle="tab" role="tab">Tab 2</a></li>
    <li role="presentation"><a data-target="#tab3" data-toggle="tab" role="tab">Tab 3</a></li>
  </ul>

  <div class="tab-content tab-content--boxed">
    <div role="tabpanel" class="tab-pane fade in active" id="tab1">
      <p><strong>Tab 1</strong></p>
      <p>Fusce neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Ut a nisl id ante tempus hendrerit. Donec sodales sagittis magna. Nam pretium turpis et arcu.</p>
      <p>Vivamus consectetuer hendrerit lacus. Ut a nisl id ante tempus hendrerit. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Morbi nec metus. In ac felis quis tortor malesuada pretium.</p>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="tab2">
      <p><strong>Tab 2</strong></p>
      <p>Fusce neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Ut a nisl id ante tempus hendrerit. Donec sodales sagittis magna. Nam pretium turpis et arcu.</p>
      <p>Vivamus consectetuer hendrerit lacus. Ut a nisl id ante tempus hendrerit. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Morbi nec metus. In ac felis quis tortor malesuada pretium.</p>
    </div>
    <div role="tabpanel" class="tab-pane fade" id="tab3">
      <p><strong>Tab 3</strong></p>
      <p>Fusce neque. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Ut a nisl id ante tempus hendrerit. Donec sodales sagittis magna. Nam pretium turpis et arcu.</p>
      <p>Vivamus consectetuer hendrerit lacus. Ut a nisl id ante tempus hendrerit. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Morbi nec metus. In ac felis quis tortor malesuada pretium.</p>
    </div>
  </div>
</div>

Table

Default

# First Name Last Name Username
1 Mark Otto mdo
2 Jacob Thornton fat
3 Larry the Bird twitter 

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>twitter</td>
    </tr>
  </tbody>
</table>

Striped

# First Name Last Name Username
1 Mark Otto mdo
2 Jacob Thornton fat
3 Larry the Bird twitter 

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>twitter</td>
    </tr>
  </tbody>
</table>

Bordered

# First Name Last Name Username
1 Mark Otto mdo
Mark Otto TwBootstrap
2 Jacob Thornton fat
3 Larry the Bird twitter 

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>twitter</td>
    </tr>
  </tbody>
</table>

Condensed

# First Name Last Name Username
1 Mark Otto mdo
2 Jacob Thornton fat
3 Larry the Bird twitter 

<table class="table table-condensed">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td colspan="2">Larry the Bird</td>
      <td>twitter</td>
    </tr>
  </tbody>
</table>

Responsive

# First Name Last Name Username Email Sport Note
1 Mark Otto mdo markotto@mail.com BasketBall Fusce neque. Cras risus ipsum, faucibus ut.
2 Jacob Thornton fat jacob@mail.com Football Fusce neque. Cras risus ipsum, faucibus ut.
3 Larry the Bird twitter larrythebird@mail.com BasketBall Fusce neque. Cras risus ipsum, faucibus ut. 

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
        <th<Email</th>
        <th<Sport</th<
        <th<Note</th<
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>mdo</td>
        <td>markotto@mail.com</td>
        <td<BasketBall</td<
        <td<Fusce neque. Cras risus ipsum, faucibus ut.</td<
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>fat</td>
        <td>jacob@mail.com</td>
        <td<BasketBall</td<
        <td<Fusce neque. Cras risus ipsum, faucibus ut.</td<
      </tr>
      <tr>
        <td>3</td>
        <td colspan="2">Larry the Bird</td>
        <td>twitter</td>
        <td>larrythebird@mail.com</td>
        <td<BasketBall</td<
        <td<Fusce neque. Cras risus ipsum, faucibus ut.</td<
      </tr>
    </tbody>
  </table>
</div>

Cards

Default

Card

Lorem ipsum dolor dolor sit amet consectetur adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?

Lorem ipsum dolor adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?


<div class="card">
  <div class="card__body stack-text stack-text--1">
    <h4>Card</h4>
    <p>Lorem ipsum dolor dolor sit amet consectetur adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?</p>
    <p>Lorem ipsum dolor adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?</p>
  </div>
</div>

Image overlay

Card img overlay

Lorem ipsum dolor dolor sit amet consectetur adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?

Lorem ipsum dolor adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?


<div class="card card-img-overlay">
  <figure class="card__img overlay overlay--dark">
    <img src="https://picsum.photos/600/300" />
  </figure>

  <div class="card__body text-white stack-text stack-text--1">
    <h4>Card img overlay</h4>
    <p>Lorem ipsum dolor dolor sit amet consectetur adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?</p>
    <p>Lorem ipsum dolor adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?</p>
  </div>
</div>

Links


<a class="link link--primary">Primary</a>
<a class="link link--secondary">Secondary</a>
<a class="link">Inherit</a>

Texts

Text colors

  • Primary
  • Secondary
  • Success
  • Warning
  • Danger
  • Info

<span class="text-primary">Primary</span>
<span class="text-secondary">Secondary</span>
<span class="text-success">Success</span>
<span class="text-warning">Warning</span>
<span class="text-danger">Danger</span>
<span class="text-info">Info</span>

Text sizes

Text 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad, asperiores unde consequuntur laboriosam iste et facilis quisquam minima quasi ipsam, fuga perferendis consequatur vel architecto maiores nulla, in repudiandae!

Text 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad, asperiores unde consequuntur laboriosam iste et facilis quisquam minima quasi ipsam, fuga perferendis consequatur vel architecto maiores nulla, in repudiandae!

Text 3
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum illo, nulla at sequi consequuntur nostrum iste modi suscipit necessitatibus magni unde voluptatem mollitia eum blanditiis error molestias architecto. Vitae, repellat!

Text 4
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad, asperiores unde consequuntur laboriosam iste et facilis quisquam minima quasi ipsam, fuga perferendis consequatur vel architecto maiores nulla, in repudiandae!

Text 5
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum illo, nulla at sequi consequuntur nostrum iste modi suscipit necessitatibus magni unde voluptatem mollitia eum blanditiis error molestias architecto. Vitae, repellat!

Lead
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum illo, nulla at sequi consequuntur nostrum iste modi suscipit necessitatibus magni unde voluptatem mollitia eum blanditiis error molestias architecto. Vitae, repellat!


<p class="text-1"><strong>Text 1</strong><br />Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad, asperiores unde consequuntur laboriosam iste et facilis quisquam minima quasi ipsam, fuga perferendis consequatur vel architecto maiores nulla, in repudiandae!</p>
            
<p class="text-2"><strong>Text 2</strong><br />Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad, asperiores unde consequuntur laboriosam iste et facilis quisquam minima quasi ipsam, fuga perferendis consequatur vel architecto maiores nulla, in repudiandae!</p>

<p class="text-3"><strong>Text 3</strong><br />Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum illo, nulla at sequi consequuntur nostrum iste modi suscipit necessitatibus magni unde voluptatem mollitia eum blanditiis error molestias architecto. Vitae, repellat!</p>

<p class="text-4"><strong>Text 4</strong><br />Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad, asperiores unde consequuntur laboriosam iste et facilis quisquam minima quasi ipsam, fuga perferendis consequatur vel architecto maiores nulla, in repudiandae!</p>

<p class="text-5"><strong>Text 5</strong><br />Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum illo, nulla at sequi consequuntur nostrum iste modi suscipit necessitatibus magni unde voluptatem mollitia eum blanditiis error molestias architecto. Vitae, repellat!</p>

<p class="lead"><strong>Lead</strong><br />Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum illo, nulla at sequi consequuntur nostrum iste modi suscipit necessitatibus magni unde voluptatem mollitia eum blanditiis error molestias architecto. Vitae, repellat!</p>

Titles

h1 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint iure dolore unde illo eaque perferendis recusandae enim

h2 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint iure dolore unde illo eaque perferendis recusandae enim

h3 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint iure dolore unde illo eaque perferendis recusandae enim

h4 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint iure dolore unde illo eaque perferendis recusandae enim

h5 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint iure dolore unde illo eaque perferendis recusandae enim
h6 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint iure dolore unde illo eaque perferendis recusandae enim

<h1>h1 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint iure dolore unde illo eaque perferendis recusandae enim</h1>
<h2>h2 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint iure dolore unde illo eaque perferendis recusandae enim</h2>
<h3>h3 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint iure dolore unde illo eaque perferendis recusandae enim</h3>
<h4>h4 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint iure dolore unde illo eaque perferendis recusandae enim</h4>
<h5>h5 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint iure dolore unde illo eaque perferendis recusandae enim</h5>
<h6>h6 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint iure dolore unde illo eaque perferendis recusandae enim</h6>

Text formatted

Title 1

Lorem ipsum dolor dolor sit amet consectetur adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?

Vestibulum suscipit nulla quis orci. Morbi ac felis. Pellentesque posuere. Phasellus tempus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus.

Title 2

Lorem ipsum dolor dolor sit amet consectetur adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?

Vestibulum suscipit nulla quis orci. Morbi ac felis. Pellentesque posuere. Phasellus tempus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus.

  • Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Donec posuere vulputate arcu. Praesent egestas neque eu enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vel dui.
    • Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Donec posuere vulputate arcu
    • Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae
  • Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Donec posuere vulputate arcu. Praesent egestas neque eu enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vel dui.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Donec posuere vulputate arcu. Praesent egestas neque eu enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vel dui.

Title 3

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Donec posuere vulputate arcu. Praesent egestas neque eu enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vel dui.


<div class="text-formatted">
  <h2>Title 1</h2>
  <p>Lorem ipsum dolor <a>dolor sit amet consectetur</a> adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?</p>
  <p>Vestibulum suscipit nulla quis orci. Morbi ac felis. Pellentesque posuere. Phasellus tempus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus.</p>
  <h3>Title 2</h3>
  <p>Lorem ipsum dolor <a>dolor sit amet consectetur</a> adipisicing elit. Est adipisci odio alias, qui eligendi rerum enim sit cupiditate iure amet! Dicta neque quos ea voluptatum laudantium consequuntur unde inventore accusantium?</p>
  <p>Vestibulum suscipit nulla quis orci. Morbi ac felis. Pellentesque posuere. Phasellus tempus. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus.</p>
  <ul>
    <li>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Donec posuere vulputate arcu. Praesent egestas neque eu enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vel dui.
    <ul>
      <li>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Donec posuere vulputate arcu</li>
      <li>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</li>
    </ul>
    </li>
    <li>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Donec posuere vulputate arcu. Praesent egestas neque eu enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vel dui.</li>
  </ul>
  <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Donec posuere vulputate arcu. Praesent egestas neque eu enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vel dui.</p>
  <h4>Title 3</h4>
  <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Donec posuere vulputate arcu. Praesent egestas neque eu enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce vel dui.</p>
</div>