mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 20:02:23 +04:00
Paweł Kuna
85 lines
5.1 KiB
Plaintext
85 lines
5.1 KiB
Plaintext
---
|
||
// Port of preview/pages/text-features.html (layout: default).
|
||
// The right column renders headings h1..h6 via a Liquid {% for i in (1..6) %}
|
||
// loop → dynamic tag name here. {{ site.homepage }} → @data/site.json homepage.
|
||
import DefaultLayout from '@shared/layouts/DefaultLayout.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">
|
||
<div class="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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="card card-lg">
|
||
<div class="card-body">
|
||
<div class="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><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 />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DefaultLayout>
|