tabler/preview/pages/text-features.astro

---
// Right column renders headings h1..h6 with dynamic tag names. Homepage URL from site.json.
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Prose from '@ui/Prose.astro'
import siteData from '@data/site.json'

const homepage = siteData.homepage
---

<DefaultLayout title="Text features" pageHeader="Text features" pageMenu="extra.text-features">
  <div class="row">
    <div class="col-7">
      <div class="card card-lg">
        <div class="card-body">
          <Prose>
            <h3>Text features</h3>

            <p>HTML provides various tags to format text and add meaning. For example, <strong>important words</strong> can be highlighted, and <em>emphasized text</em> can be italicized.</p>

            <p>If you want to visit an interesting website, check out <a href={homepage} target="_blank">this page</a>.</p>

            <p>The term <abbr data-bs-toggle="tooltip" data-bs-placement="top" title="Hypertext Markup Language">HTML</abbr> is widely used in web development.</p>

            <p>Previously, the instruction said <del>"Do not include images."</del> However, <ins>"You may now add images."</ins></p>

            <blockquote cite={homepage}>"The best way to predict the future is to create it." – Peter Drucker</blockquote>

            <p>Sometimes, <mark>highlighting important text</mark> can improve readability.</p>

            <p>In JavaScript, you can log messages using the following code: <code>console.log('Hello, world!');</code></p>

            <p>To copy text on Windows, use <kbd>Ctrl + C</kbd>. On macOS, use <kbd>Cmd + C</kbd>.</p>

            <p>Water is written chemically as H<sub>2</sub>O, while Einstein’s famous equation is E = mc<sup>2</sup>.</p>

            <p>Many people mistakenly spell <span class="text-incorrect">"recieve"</span> instead of <span class="text-correct">"receive"</span>.</p>

            <p>The correct way to write the date format is <span class="text-correct">"February 12, 2026"</span>, not <span class="text-incorrect">"12th February, 2026"</span> in American English.</p>

            <p>
              If you need select text, you can use your mouse or keyboard. To select text using your mouse, click and drag the cursor over the text <span class="text-selected">you want to highlight</span>.
            </p>

            <p><small>Disclaimer: This text is for demonstration purposes only.</small></p>
          </Prose>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card card-lg">
        <div class="card-body">
          <Prose>
            {
              [1, 2, 3, 4, 5, 6].map((i) => {
                const Heading = `h${i}`
                return (
                  <Heading>
                    Heading {i} by{' '}
                    <a class="mention">
                      <>
                        <span class="mention-avatar" style="background-image: url(/static/avatars/035f.jpg)" />
                        <span class="visually-hidden">@</span>
                      </>
                      JohnDoe
                    </a>
                  </Heading>
                )
              })
            }

            <p>
              Tabler is a modern UI framework which <span class="text-incorrect" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">provide</span> developers with a lot of <span class="text-incorrect">pre-build</span> components and customizable options. It is
              <span class="text-incorrect">build</span> on Bootstrap, making it easy to integrate into existing projects. The design is clean, responsive, and accessible, ensuring that <span class="text-incorrect">user</span> can navigate through <span class="text-incorrect">interface</span> easily. Tabler also <span
                class="text-incorrect">support</span
              > all modern browsers, but some features may not work properly on Internet Explorer. With
              <span class="text-incorrect">it's</span> lightweight structure and optimized performance, Tabler helps developers create stunning web applications faster.
            </p>

            <p>
              Hey <a class="mention"><span class="mention-avatar" style="background-image: url(/static/avatars/035f.jpg)"></span><span class="visually-hidden">@</span>JohnDoe</a>, have you seen the latest updates on <a class="mention">#WebDevelopment<span class="mention-count">16</span></a>? <a class="mention"
                ><span class="mention-avatar" style="background-image: url(/static/avatars/035f.jpg)"></span><span class="visually-hidden">@</span>JaneSmith</a
              > just shared an interesting article about <a class="mention"><span class="mention-app" style="background-image: url(/static/brands/messenger.svg)"></span>Messenger</a> and <a class="mention"><span class="mention-app" style="background-image: url(/static/brands/netflix.svg)"></span>Netflix</a>!
            </p>

            <p>
              The sky is <span class="mention"><span class="mention-color bg-blue"></span>#066fd1</span>, the grass is <span class="mention"><span class="mention-color bg-green"></span>rgb(47, 179, 68)</span>, fire trucks are often <span class="mention"><span class="mention-color bg-red"></span>red</span>, oranges are <span
                class="mention"><span class="mention-color bg-orange"></span>hsl(24deg, 94.49%, 49.8%)</span
              >. Some flowers are <span class="mention"><span class="mention-color bg-purple"></span>hwb(288.35deg, 24.31%, 21.18%)</span>.
            </p>

            <hr />
          </Prose>
        </div>
      </div>
    </div>
  </div>
</DefaultLayout>