Le contenu
En

Typographie


<h1>

<h2>

<h3>

<h4>

<h5>
<h6>

Liens

<a href="#" class="brand-Primaire">asdasd</a>
<a href="#" class="brand-Secondaire">asdasdasd</a>
<a href="#" class="hTypeMenu">asdasdasdasd</a> 
<a href="#" class="hTypeMenuSecondaire">asdasdasdasd</a> 
<a href="#" class="hDeco">asdasdasdasd</a>


Lead body

<p class="lead">
       Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.


Marked text

<p>
       You can use the mark tag to <mark>highlight</mark> text.
</p>

You can use the mark tag to highlight text.


Deleted text

<del>This line of text is meant to be treated as deleted text.</del>

This line of text is meant to be treated as deleted text.


Blockquote

<object> <!-- IMPORTANT : Hack RX -->
    <blockquote>
        <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        </p>
        <footer>
             Someone famous in <cite title="Source Title">Source Title</cite>
        </footer>
    </blockquote>
</object>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title


Couleurs contextuelles

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.


Background contextuel

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.


Alertes

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>


Adaptatif

  Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
.visible-xs-* Visible
.visible-sm-* Visible
.visible-md-* Visible
.visible-lg-* Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible

Options print

Classes Browser Print
.visible-print-block
.visible-print-inline
.visible-print-inline-block
Visible
.hidden-print Visible

hec.ca > Formation RX > Typographie

Suivez HEC Montréal sur les médias sociaux

              

À propos du site web  |  Documents officiels

En cas d'urgence

© HEC Montréal, 2024  Tous droits réservés