Source code

src/showcase/pages/components/typography.html

This file is included in this documentation build. It is displayed as code and is not executed.

Download source

<!--
Demonstrate the typography component on its own lazy route.

@author Laurent Declercq l.declercq@agon-innovation.ch
@version 20260921
-->
<section x-data="componentCatalog" class="component-library">
  <include
    src="partials/components/page-header.html"
    locals='{"title":"componentTypography"}'
  ></include>
  <div class="catalog-grid">
    <article class="card full">
      <header class="card-header"><h2 x-text="$t('galleryTypography')"></h2></header>
      <div class="card-body">
        <div class="type-scale">
          <div class="display-5">Atrium</div>
          <div class="h1" x-text="$t('galleryTypeSample')"></div>
          <div class="h2" x-text="$t('galleryTypeSample')"></div>
          <div class="h3" x-text="$t('galleryTypeSample')"></div>
          <div class="h4" x-text="$t('galleryTypeSample')"></div>
          <div class="h5" x-text="$t('galleryTypeSample')"></div>
          <div class="h6" x-text="$t('galleryTypeSample')"></div>
        </div>
        <p class="lead" x-text="$t('galleryBody')"></p>
        <p class="text-muted" x-text="$t('galleryBody')"></p>
        <div class="demo-row">
          <strong>Aa</strong>
          <em>Aa</em>
          <mark>Aa</mark>
          <small>Aa</small>
          <s>Aa</s>
          <code>const atrium</code>
          <kbd>Ctrl K</kbd>
        </div>
        <blockquote class="blockquote mt-4">
          <p x-text="$t('galleryQuote')"></p>
          <footer class="blockquote-footer">Agon Partners Innovation AG</footer>
        </blockquote>
      </div>
    </article>
  </div>
</section>