tabler/pages/typography.html

---
title: Typography
page-title: Typography
done: true
---

<div class="row">
   <div class="col-12 col-md-6">

      {% card title="Card title" %}
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto corporis cumque debitis dicta
      dolores error esse explicabo incidunt inventore minima, officiis quis reprehenderit saepe sed sit vel voluptatem,
      voluptatibus?
      {% endcard %}

      <div class="card">
         <div class="card-header">
            <div class="card-title">Headings</div>
         </div>
         <div class="card-body">
            <h1>h1. Heading text</h1>
            <h2>h2. Heading text</h2>
            <h3>h3. Heading text</h3>
            <h4>h4. Heading text</h4>
            <h5>h5. Heading text</h5>
            <h6>h6. Heading text</h6>
         </div>
      </div>
   </div>
   <div class="col-12 col-md-6">
      <div class="card">
         <div class="card-header">
            <div class="card-title">Headings with secondary text</div>
         </div>
         <div class="card-body">
            <h1>h1. Heading text
               <small>Secondary text</small>
            </h1>
            <h2>h2. Heading text
               <small>Secondary text</small>
            </h2>
            <h3>h3. Heading text
               <small>Secondary text</small>
            </h3>
            <h4>h4. Heading text
               <small>Secondary text</small>
            </h4>
            <h5>h5. Heading text
               <small>Secondary text</small>
            </h5>
            <h6>h6. Heading text
               <small>Secondary text</small>
            </h6>
         </div>
      </div>
   </div>
   <div class="col-12 col-md-6">
      <div class="card">
         <div class="card-header">
            <div class="card-title">Body text</div>
         </div>
         <div class="card-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare iaculis purus, eget gravida
               est
               lacinia at. Nam magna dolor, vestibulum ut consequat in, dictum a metus.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid amet asperiores assumenda at,
               commodi
               est, et, fugiat in ipsam iure mollitia optio quas reiciendis rem repellat sed similique
               voluptatibus.</p>
         </div>
      </div>
   </div>
   <div class="col-12 col-md-6">
      <div class="card">
         <div class="card-header">
            <div class="card-title">Lead body</div>
         </div>
         <div class="card-body">
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare iaculis purus,
               eget
               gravida est lacinia at. Nam magna dolor, vestibulum ut consequat in, dictum a metus.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid amet asperiores assumenda at,
               commodi
               est, et, fugiat in ipsam iure mollitia.</p>
         </div>
      </div>
   </div>
   <div class="col-12">
      <div class="card">
         <div class="card-header">
            <div class="card-title">Alignment types</div>
         </div>
         <div class="card-body">
            <div class="row">
               <div class="col-12 col-md-4">
                  <p class="text-left">Left aligned text.</p>
                  <p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid
                     beatae
                     consequatur culpa,
                     deserunt, doloribus ea et inventore iste molestias nihil nobis officiis qui reiciendis sint
                     totam
                     ullam veritatis vitae.</p></div>
               <div class="col-12 col-md-4">
                  <p class="text-center">Center aligned text.</p>
                  <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
                     consequatur
                     error esse, facilis
                     harum, ipsa libero minima modi nisi nobis obcaecati odit officia officiis quis quisquam quos
                     sapiente, sunt. Ab.</p></div>
               <div class="col-12 col-md-4">
                  <p class="text-right">Right aligned text.</p>
                  <p class="text-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur
                     deleniti
                     dicta eius excepturi
                     facere nulla quia sequi sit soluta ullam! Animi commodi cupiditate, enim id maiores minus
                     mollitia
                     sed temporibus!</p></div>
            </div>
         </div>
      </div>
   </div>

   <div class="col-12 col-md-4">
      <div class="card">
         <div class="card-header">
            <div class="card-title">Unordered list</div>
         </div>
         <div class="card-body">
            <ul>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret
                  <ul>
                     <li>lorem ipsum doloret</li>
                     <li>lorem ipsum doloret</li>
                     <li>lorem ipsum doloret</li>
                  </ul>
               </li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
            </ul>
         </div>
      </div>
   </div>
   <div class="col-12 col-md-4">
      <div class="card">
         <div class="card-header">
            <div class="card-title">Ordered list</div>
         </div>
         <div class="card-body">
            <ol>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
            </ol>
         </div>
      </div>
   </div>
   <div class="col-12 col-md-4">
      <div class="card">
         <div class="card-header">
            <div class="card-title">Unordered list</div>
         </div>
         <div class="card-body">
            <ul class="list-unstyled">
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret
                  <ul>
                     <li>lorem ipsum doloret</li>
                     <li>lorem ipsum doloret</li>
                     <li>lorem ipsum doloret</li>
                  </ul>
               </li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
               <li>lorem ipsum doloret</li>
            </ul>
         </div>
      </div>
   </div>

   <div class="col-12 col-md-6">
      <div class="card">
         <div class="card-header">
            <div class="card-title">Blockquotes</div>
         </div>
         <div class="card-body">
            <blockquote class="blockquote">
               <p>Maecenas id tellus felis. Phasellu s eu magna ornare, ultrices metus yet odio. Cras et lectus
                  vitae
                  diam rutrum hendrerit.</p>
            </blockquote>
            <blockquote class="blockquote">
               <p>Fusce bibendum in velit nec ullamcorper. Nullam elementum erat eu nisi venenatis elementum.
                  Suspendisse maximus.</p>
               <footer class="blockquote-footer">Julius Cesar</footer>
            </blockquote>
         </div>
      </div>
   </div>
   <div class="col-12 col-md-6">
      <div class="card">
         <div class="card-header">
            <div class="card-title">Text elements</div>
         </div>
         <div class="card-body">
            <p>You can use the mark tag to
               <mark>highlight</mark>
               text.
            </p>
            <p><s>This line of text is meant to be treated as deleted</s></p>
            <p><u>This line of text will render as underlined.</u></p>
            <p>
               <small>This line of text is meant to be treated as fine print.</small>
            </p>
            <p>The following snippet of text is <strong>rendered as bold text.</strong></p>
            <p>The following snippet of text is <em>rendered as italicized text.</em></p>
         </div>
      </div>
   </div>

   <div class="col-12 col-md-6">
      <div class="card">
         <div class="card-header">
            <div class="card-title">Text color</div>
         </div>
         <div class="card-body">
            <p class="text-muted">This is an example of muted text.</p>
            <p class="text-success">This is an example of success text.</p>
            <p class="text-info">This is an example of info text.</p>
            <p class="text-warning">This is an example of warning text.</p>
            <p class="text-danger">This is an example of danger text.</p>
         </div>
      </div>
   </div>
   <div class="col-12 col-md-6">
      <div class="card">
         <div class="card-header">
            <div class="card-title">Addresses</div>
         </div>
         <div class="card-body">
            <address><strong>Twitter, Inc. <br> </strong>1355 Market Street, Suite 900 <br>
               San Francisco, CA 94103 <br><abbr title="Phone">P: </abbr>(123) 456 7890
            </address>
            <address><strong>Full name <br></strong><a mailto:#="">first.last@example.com</a></address>
         </div>
      </div>
   </div>
</div>