{#
/**
 * @file
 * typography
 *
 * See typography.wingsuit.yml for documentation.
 */
#}
{{ attach_library('ui_patterns/libraries.bs_badge') }}

{# Display headings #}

<div class="bd-text">
  <div class="display-1">Display 1</div>
  <div class="display-2">Display 2</div>
  <div class="display-3">Display 3</div>
  <div class="display-4">Display 4</div>
  <div class="display-5">Display 5</div>
  <div class="display-6">Display 6</div>
  <hr>
</div>
<h1>Page title H1</h1>
<div class="bd-text">
  <h1>Plain  H1</h1>
  <h2>Plain  H2</h2>
  <h3>Plain  H3</h3>
  <h4>Plain  H4</h4>
  <h5>Plain  H5</h5>
  <h6>Plain  H6</h6>
  <hr>
  <div class="font-size-lg">Font size lg</div>
  <div class="font-size-base">Font size md</div>
  <div class="font-size-sm">Font size sm</div>
  <hr>
  {# DIV #}
  <div class="nothing">A DIV without a class uses the base font.</div>
  <hr>
  {# Lead #}
  <p class="lead">
    Paragraph with 'lead' class. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
  </p>
  <hr>
  {# standfirst #}
  <p class="standfirst">
    Paragraph with 'standfirst' class. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
  </p>
  <hr>
  {# blockquote #}
  <blockquote class="blockquote">
    Blockquote with 'blockquote' class.  Vivamus sagittis lacus vel augue laoreet rutrum Vivamus sagittis lacus vel augue laoreet rutrum  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
  </blockquote>
  <hr>
  {# P #}
  <p>You can use the mark tag to <mark>highlight</mark> text.</p>
  <p><del>This line of text is meant to be treated as deleted text.</del></p>
  <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
  <p><ins>This line of text is meant to be treated as an addition to the document.</ins></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><strong>This line rendered as bold text.</strong></p>
  <p><em>This line rendered as italicized text.</em></p>
  <hr>

  <h1>Example heading <span class="badge bg-secondary">New</span></h1>
  <h2>Example heading <span class="badge bg-secondary">New</span></h2>
  <h3>Example heading <span class="badge bg-secondary">New</span></h3>
  <h4>Example heading <span class="badge bg-secondary">New</span></h4>
  <h5>Example heading <span class="badge bg-secondary">New</span></h5>
  <h6>Example heading <span class="badge bg-secondary">New</span></h6>
  <hr>
  <button type="button" class="btn btn-primary">
    Notifications <span class="badge bg-secondary">4</span>
  </button>
  <hr>
  <button type="button" class="btn btn-primary position-relative">
    Inbox
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
      99+
      <span class="visually-hidden">unread messages</span>
    </span>
  </button>
  <hr>
  <span class="badge bg-default">Default</span>
  <span class="badge bg-primary">Primary</span>
  <span class="badge bg-secondary">Secondary</span>
  <span class="badge bg-success">Success</span>
  <span class="badge bg-danger">Danger</span>
  <span class="badge bg-warning text-dark">Warning</span>
  <span class="badge bg-info text-dark">Info</span>
  <span class="badge bg-light text-dark">Light</span>
  <span class="badge bg-dark">Dark</span>

  <hr>

  <h2>Text colors</h2>

  <p class="text-default">.text-default</p>
  <p class="text-primary">.text-primary</p>
  <p class="text-secondary">.text-secondary</p>
  <p class="text-success">.text-success</p>
  <p class="text-danger">.text-danger</p>
  <p class="text-warning">.text-warning</p>
  <p class="text-info">.text-info</p>
  <p class="text-light bg-dark">.text-light</p>
  <p class="text-dark">.text-dark</p>
  <p class="text-muted">.text-muted</p>
  <p class="text-white bg-dark">.text-white</p>
</div>
