tabler/preview/pages/typography.astro

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
---

<DefaultLayout title="Typography" pageMenu="base.typography">
  <div class="card card-lg">
    <div class="card-body">
      <div class="row g-4">
        <div class="col-12 prose">
          <h1>1/1 Text</h1>
          <p>
            I'm not a witch. Now, look here, my good man. Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! Well, I didn't vote for you. You can't expect to wield supreme power just 'cause some watery tart threw a sword at you! Bring her forward! He hasn't got shit all over him. He
            hasn't got shit all over him. We shall say 'Ni' again to you, if you do not appease us.
          </p>
          <p>Well, we did do the nose. Why? Now, look here, my good man. Be quiet! Well, what do you want?</p>
        </div>

        <div class="col-md-6 prose">
          <h2>1/2 Text</h2>
          <p>What do you mean? We shall say 'Ni' again to you, if you do not appease us. I have to push the pram a lot. No, no, no! Yes, yes. A bit. But she's got a wart. What a strange person.</p>
        </div>

        <div class="col-md-6 prose">
          <h2>1/2 Text</h2>
          <p>And this isn't my nose. This is a false one. We found them. Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.</p>
        </div>

        <div class="col-md-4 prose">
          <h3>1/3 Text</h3>
          <p>Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. Why? Well, what do you want? …Are you suggesting that coconuts migrate?</p>
        </div>
        <div class="col-md-8 prose">
          <h3>2/3 Text</h3>
          <p>Well, I got better. Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. Found them? In Mercia?! The coconut's tropical! A newt? …Are you suggesting that coconuts migrate?</p>
        </div>

        <div class="col-md-8 prose">
          <p>I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time! We want a shrubbery!!</p>
          <p>Well, how'd you become king, then? Found them? In Mercia?! The coconut's tropical! Oh, ow! I am your king.</p>
        </div>

        <div class="col-md-3 prose">
          <h4>Small Text</h4>
          <p>Well, Mercia's a temperate zone! You don't vote for kings. Now, look here, my good man.</p>
          <p class="text-secondary small lh-base">Who's that then? Well, we did do the nose.</p>
        </div>

        <div class="col-md-4 prose">
          <h3>Unordered list</h3>
          <ul>
            <li>lorem ipsum doloret</li>
            <li>
              lorem ipsum doloret
              <ul>
                <li>lorem ipsum doloret</li>
                <li>lorem ipsum doloret</li>
              </ul>
            </li>
            <li>lorem ipsum doloret</li>
            <li>lorem ipsum doloret</li>
          </ul>
        </div>

        <div class="col-md-4 prose">
          <h3>Ordered list</h3>
          <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>
          </ol>
        </div>

        <div class="col-md-4 prose">
          <h3>Unstyled list</h3>
          <ul class="list-unstyled">
            <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>
          </ul>
        </div>

        <div class="col-12 prose">
          <h3>Blockquote</h3>

          <blockquote class="blockquote">
            <p>I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time! The nose?</p>
            <footer class="blockquote-footer">Julius Cesar</footer>
          </blockquote>
        </div>

        <div class="col-md-4 prose">
          <h3>Text elements</h3>

          <div>You can use the mark tag to <mark>highlight</mark> text.</div>
          <div><s>This line of text is meant to be treated as deleted</s></div>
          <div><u>This line of text will render as underlined.</u></div>
          <div><small>This line of text is meant to be treated as fine print.</small></div>
          <div>The following snippet of text is <strong>rendered as bold text.</strong></div>
          <div>The following snippet of text is <em>rendered as italicized text.</em></div>
          <div>The following snippet of text show useful keyboard shortcut: <kbd>⌘</kbd> + <kbd>C</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.</div>
        </div>

        <div class="col-md-4 prose">
          <h3>Text color</h3>
          <div class="text-primary">This is an example of primary text.</div>
          <div class="text-secondary">This is an example of secondary text.</div>
          <div class="text-body">This is an example of body text.</div>
          <div class="text-success">This is an example of success text.</div>
          <div class="text-info">This is an example of info text.</div>
          <div class="text-warning">This is an example of warning text.</div>
          <div class="text-danger">This is an example of danger text.</div>
          <div class="text-pink">This is an example of pink text.</div>
        </div>

        <div class="col-md-4 prose">
          <h3>Addresses</h3>
          <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 href="mailto:#">first.last@example.com</a></address>
        </div>

        <div class="col-md-4 prose">
          <h3>Typography</h3>

          <div>
            {
              [1, 2, 3, 4, 5, 6].map((i) => {
                const Heading = `h${i}` as keyof HTMLElementTagNameMap
                return <Heading>H{i} Lorem ipsum dolor sit amet</Heading>
              })
            }
          </div>
        </div>
      </div>
    </div>
  </div>
</DefaultLayout>