Structures de sections et fieldset

Les tags natif section ou fieldset permettent de structurer la page.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<section>
  <p>...</p>
</section>
<fieldset>
  <div class="form-group row">
    ...
  </div>
  ...
</fieldset>

Titres de sections

Différents styles de titrages sont disponibles.

Titre du fieldset
Titre renforcé du fieldset
Titre renforcé (style H2) 
<fieldset>
  <legend>
    <span>Titre du fieldset</span>
  </legend>
</fieldset>
<fieldset>
  <legend>
    <strong>Titre renforcé du fieldset</strong>
  </legend>
</fieldset>
<fieldset>
  <legend>
    <em>Titre renforcé du fieldset (style H2)</em>
  </legend>
</fieldset>
Titre alternatif du fieldset
Titre renforcé alternatif du fieldset
Titre renforcé alternatif du fieldset (style H2) 
<fieldset>
  <legend class="section-title-alt">
    <span>Titre alternatif du fieldset</span>
  </legend>
</fieldset>
<fieldset>
  <legend class="section-title-alt">
    <strong>Titre renforcé alternatif du fieldset</strong>
  </legend>
</fieldset>
<fieldset>
  <legend class="section-title-alt">
    <em>Titre renforcé alternatif du fieldset (style H2)</em>
  </legend>
</fieldset>

Titre H2

Titre H3

Titre H4

Titre H5
Titre H6
<h2><span>...</span></h2>

Titre H2

Titre H3

Titre H4

Titre H5
Titre H6
<h2 class="section-title"><span>...</span></h2>

Titre H2

Titre H3

Titre H4

Titre H5
Titre H6
<h2 class="section-title-alt"><span>...</span></h2>

Titre H2

<div class="accordion">
  <div class="header">
    <h2 class="section-title-alt btn-block">
      <button class="btn btn-link ">...</button>
    </h2>
  </div>
  ...
</div>
...
<div class="accordion">
  <div class="header">
    <h2 class="section-title-alt btn-block icon-right">
      <button class="btn btn-link ">...</button>
    </h2>
  </div>
  ...
</div>

<div class="accordion">
  <div aria-expanded="true" class="header">
    <h2 class="section-title-alt btn-block">
      <button class="btn btn-link ">Accordeon avec icônes</button>
      <a  class="btn btn-lg btn-icon btn-icon-secondary"
          data-toggle="tooltip" title=""
          data-original-title="Message de l'infobulle d'aide">
        <span class="am-icon icon-help-circle"></span>
      </a>
    </h2>
  </div>
</div>  

<div class="accordion">
  <div aria-expanded="true" class="header">
    <h2 class="section-title-alt btn-block icon-right">
      <button class="btn btn-link ">Accordeon avec icônes</button>
      <a  class="btn btn-lg btn-icon btn-icon-secondary"
          data-toggle="tooltip" title=""
          data-original-title="Message de l'infobulle d'aide">
        <span class="am-icon icon-help-circle"></span>
      </a>
    </h2>
  </div>
</div>

Titres de section avec icônes

Titre H2

Titre H3

Titre H4

Titre H5
Titre H6 
<h2>
  <span class="am-icon icon-lg icon-compte" aria-hidden="true"></span>
  <span>...</span>
</h2>

Titre H2

Titre H3

Titre H4

Titre H5
Titre H6 
<h2 class="section-title">
  <span class="am-icon icon-lg icon-compte" aria-hidden="true"></span>
  </span>...</span>
</h2>

Titre H2

Titre H3

Titre H4

Titre H5
Titre H6 
<h2 class="section-title-alt">
  <span class="am-icon icon-lg icon-compte" aria-hidden="true"></span>
  <span>...</span>
</h2>

Titre H2

Titre H3

Titre H4 

<h2 class="section-title-alt">
  <span class="am-icon icon-lg icon-compte" aria-hidden="true"></span>
  <span>Titre</span>
  <a  class="btn btn-lg btn-icon btn-icon-secondary"
      data-toggle="tooltip"
      data-original-title="Message de l'infobulle d'aide">
      <span class="am-icon icon-help-circle"></span>
  </a>
</h2>

Titre H2

Titre H3

Titre H4 

<h2 class="section-title-alt">
  <span class="am-icon icon-lg icon-compte" aria-hidden="true"></span>
  <span>Titre</span>
  <a  class="btn btn-lg btn-icon btn-icon-secondary last"
      data-toggle="tooltip"
      data-original-title="Message de l'infobulle d'aide">
      <span class="am-icon icon-help-circle"></span>
  </a>
</h2>
Titre du fieldset (style H2) 
<fieldset>
  <legend class="section-title-alt">
    <em>
      <span class="am-icon icon-lg icon-compte" aria-hidden="true"></span>
      ...
    </em>
  </legend>
</fieldset>
Titre du fieldset (style H2)
Titre du fieldset (style H2)
Titre du fieldset (style H2) 
<fieldset>
  <legend class="section-title-alt">
    <em>
      <span class="am-icon icon-lg icon-compte" aria-hidden="true"></span>
      ...
    </em>
    <a class="btn btn-lg btn-icon btn-icon-secondary last" data-toggle="tooltip" title="" data-original-title="Message de l'infobulle d'aide">
      <span class="am-icon icon-help-circle"></span>
    </a>
  </legend>
</fieldset>

Séparateurs verticaux

Pour les mises en pages plus complexes qui nécessitent de bien séparer visuellement les colonnes

Titre de section

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Titre de section

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Titre de section

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Titre de section

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div class="row has-divider">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

<div class="row has-full-divider">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>