mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
Fix heading order, form markup, and a11y on preview pages (#3094)
This commit is contained in:
Bartosz-Do authored and 
GitHub committed
1 parent
f1796f27ab
commit
0d39308ac2
60 files changed
+202
-170
No files matched your search
@@ -10,7 +10,7 @@ import OtpInput from '@ui/OtpInput.astro'
|
||||
<SingleLayout title="2-Step Verification">
|
||||
<form class="card card-md" action="./" method="get" novalidate>
|
||||
<div class="card-body">
|
||||
<CardTitle class="text-center mb-4">Authenticate Your Account</CardTitle>
|
||||
<CardTitle as="h1" class="text-center mb-4">Authenticate Your Account</CardTitle>
|
||||
|
||||
<p class="my-4 text-center">
|
||||
Please confirm your account by entering the authorization code sent to <strong>+1 856-672-8552</strong>.
|
||||
@@ -33,7 +33,7 @@ import OtpInput from '@ui/OtpInput.astro'
|
||||
<FormFooter>
|
||||
<ButtonList class="flex-nowrap">
|
||||
<Button text="Cancel" block href="2-step-verification.html" />
|
||||
<Button text="Verify" block color="primary" />
|
||||
<Button type="submit" text="Verify" block color="primary" />
|
||||
</ButtonList>
|
||||
</FormFooter>
|
||||
</div>
|
||||
|
||||
@@ -10,7 +10,7 @@ import CardTitle from '@ui/CardTitle.astro'
|
||||
<SingleLayout title="2-Step Verification">
|
||||
<form class="card card-md" action="./2-step-verification-code.html" method="get" novalidate>
|
||||
<div class="card-body">
|
||||
<CardTitle class="text-center mb-4">2-Step Verification</CardTitle>
|
||||
<CardTitle as="h1" class="text-center mb-4">2-Step Verification</CardTitle>
|
||||
|
||||
<FormGroup label="Country" for="verify-country">
|
||||
<select class="form-select" id="verify-country" autocomplete="country-name">
|
||||
@@ -21,7 +21,7 @@ import CardTitle from '@ui/CardTitle.astro'
|
||||
<FormGroup label="Your Phone Number" for="verify-phone" class="mb-4">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">+1</span>
|
||||
<input type="tel" class="form-control" id="verify-phone" placeholder="Enter phone number" autocomplete="tel-national" />
|
||||
<input type="tel" class="form-control" id="verify-phone" placeholder="Enter phone number" autocomplete="tel" />
|
||||
</div>
|
||||
</FormGroup>
|
||||
|
||||
|
||||
@@ -79,12 +79,12 @@ function greetUser(name) {
|
||||
<CardBody>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
<div class="h1">Heading 1</div>
|
||||
<div class="h2">Heading 2</div>
|
||||
<div class="h3">Heading 3</div>
|
||||
<div class="h4">Heading 4</div>
|
||||
<div class="h5">Heading 5</div>
|
||||
<div class="h6">Heading 6</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<p class="lead">This is a lead paragraph with larger text.</p>
|
||||
@@ -238,7 +238,7 @@ function greetUser(name) {
|
||||
<input type="email" class="form-control" id="all-elements-email-input" placeholder="Enter email" />
|
||||
</FormGroup>
|
||||
<FormGroup label="Password Input" for="all-elements-password-input">
|
||||
<input type="password" class="form-control" id="all-elements-password-input" placeholder="Enter password" />
|
||||
<input type="password" class="form-control" id="all-elements-password-input" placeholder="Enter password" autocomplete="current-password" />
|
||||
</FormGroup>
|
||||
<FormGroup label="Select Dropdown" for="select-demo-select">
|
||||
<DataSelect id="demo-select" values={['Option 1', 'Option 2', 'Option 3']} />
|
||||
@@ -377,7 +377,7 @@ function greetUser(name) {
|
||||
<AvatarList>
|
||||
<Avatar icon="user" />
|
||||
<Avatar icon="star" color="warning" />
|
||||
<Avatar placeholder="ST" status="success" />
|
||||
<Avatar placeholder="ST" status="success" statusLabel="Online" />
|
||||
</AvatarList>
|
||||
</div>
|
||||
</CardBody>
|
||||
|
||||
@@ -3,6 +3,6 @@ import SingleLayout from '@shared/layouts/SingleLayout.astro'
|
||||
import AuthLockCard from '@shared/components/cards/AuthLockCard.astro'
|
||||
---
|
||||
|
||||
<SingleLayout title="Forgot password">
|
||||
<SingleLayout title="Account locked">
|
||||
<AuthLockCard />
|
||||
</SingleLayout>
|
||||
@@ -25,12 +25,12 @@ const sizes = ['sm', 'md', 'lg']
|
||||
<CardBody>
|
||||
<CardTitle>In headings</CardTitle>
|
||||
<CardSubtitle>A badge scales with the heading level it sits next to.</CardSubtitle>
|
||||
<h1>Example heading <span class="badge">New</span></h1>
|
||||
<h2>Example heading <span class="badge">New</span></h2>
|
||||
<h3>Example heading <span class="badge">New</span></h3>
|
||||
<h4>Example heading <span class="badge">New</span></h4>
|
||||
<h5>Example heading <span class="badge">New</span></h5>
|
||||
<h6>Example heading <span class="badge">New</span></h6>
|
||||
<div class="h1">Example heading <span class="badge">New</span></div>
|
||||
<div class="h2">Example heading <span class="badge">New</span></div>
|
||||
<div class="h3">Example heading <span class="badge">New</span></div>
|
||||
<div class="h4">Example heading <span class="badge">New</span></div>
|
||||
<div class="h5">Example heading <span class="badge">New</span></div>
|
||||
<div class="h6">Example heading <span class="badge">New</span></div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@@ -53,12 +53,12 @@ const messages = chats as Message[]
|
||||
<div class="card-body scrollable"><Chat wide /></div>
|
||||
<div class="card-footer">
|
||||
<div class="input-group input-group-flat">
|
||||
<input type="text" class="form-control" autocomplete="off" placeholder="Type message" />
|
||||
<input type="text" class="form-control" autocomplete="off" placeholder="Type message" aria-label="Type message" />
|
||||
|
||||
<span class="input-group-text">
|
||||
<a href="#" class="link-secondary" data-bs-toggle="tooltip" aria-label="Clear search" title="Clear search"> <Icon name="mood-smile" /> </a>
|
||||
<a href="#" class="link-secondary" data-bs-toggle="tooltip" aria-label="Insert emoji" title="Insert emoji"> <Icon name="mood-smile" /> </a>
|
||||
|
||||
<a href="#" class="link-secondary ms-2" data-bs-toggle="tooltip" aria-label="Add notification" title="Add notification"> <Icon name="paperclip" /> </a>
|
||||
<a href="#" class="link-secondary ms-2" data-bs-toggle="tooltip" aria-label="Attach file" title="Attach file"> <Icon name="paperclip" /> </a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -135,7 +135,7 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
|
||||
<CardBody>
|
||||
<CardTitle>Gradient</CardTitle>
|
||||
<CardSubtitle>Build a gradient from any two colors and preview it live.</CardSubtitle>
|
||||
<form action="">
|
||||
<form>
|
||||
<div class="row g-4">
|
||||
<div class="col">
|
||||
<FormGroup label="From" for="colors-gradient-from" class="">
|
||||
|
||||
@@ -22,7 +22,7 @@ const emailEntries = Object.entries(emails)
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-10">
|
||||
<h3 class="h1">Tabler Emails</h3>
|
||||
<h2 class="h1">Tabler Emails</h2>
|
||||
<Prose class="text-secondary fs-3">
|
||||
{emailEntries.length} eye-catching, customizable and responsive email templates to improve your email communication. No coding skills needed.
|
||||
</Prose>
|
||||
|
||||
@@ -18,18 +18,18 @@ const categories = faq as { name: string; questions: { question: string }[] }[]
|
||||
<h2 class="mb-3">
|
||||
{ci + 1}. {category.name}
|
||||
</h2>
|
||||
<div id={`faq-${ci + 1}`} class="accordion accordion-tabs" role="tablist" aria-multiselectable="true">
|
||||
<div id={`faq-${ci + 1}`} class="accordion accordion-tabs">
|
||||
{category.questions.map((question, qi) => (
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header">
|
||||
<button class={`accordion-button${qi === 0 ? '' : ' collapsed'}`} data-bs-toggle="collapse" data-bs-target={`#faq-${ci + 1}-${qi + 1}`} role="tab">
|
||||
<h3 class="accordion-header">
|
||||
<button id={`faq-btn-${ci + 1}-${qi + 1}`} class={`accordion-button${qi === 0 ? '' : ' collapsed'}`} type="button" data-bs-toggle="collapse" data-bs-target={`#faq-${ci + 1}-${qi + 1}`} aria-expanded={qi === 0 ? 'true' : 'false'} aria-controls={`faq-${ci + 1}-${qi + 1}`}>
|
||||
{question.question}
|
||||
<div class="accordion-button-toggle">
|
||||
<span class="accordion-button-toggle">
|
||||
<Icon name="chevron-down" />
|
||||
</div>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id={`faq-${ci + 1}-${qi + 1}`} class={`accordion-collapse collapse${qi === 0 ? ' show' : ''}`} role="tabpanel" data-bs-parent={`#faq-${ci + 1}`}>
|
||||
</h3>
|
||||
<div id={`faq-${ci + 1}-${qi + 1}`} class={`accordion-collapse collapse${qi === 0 ? ' show' : ''}`} aria-labelledby={`faq-btn-${ci + 1}-${qi + 1}`} data-bs-parent={`#faq-${ci + 1}`}>
|
||||
<div class="accordion-body pt-0">
|
||||
<div>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias dignissimos dolorum ea est eveniet, excepturi illum in iste iure maiores nemo recusandae rerum saepe sed, sunt totam! Explicabo, ipsa?</p>
|
||||
|
||||
@@ -179,10 +179,10 @@ const rows = [
|
||||
<input class="form-control" placeholder="your-email@domain.com" />
|
||||
</FormGroup>
|
||||
<FormGroup label="Password">
|
||||
<input type="password" class="form-control" value="password" />
|
||||
<input type="password" class="form-control" value="password" autocomplete="current-password" />
|
||||
</FormGroup>
|
||||
</CardBody>
|
||||
<CardFooter class="text-end"><Button text="Save" color="primary" /></CardFooter>
|
||||
<CardFooter class="text-end"><Button type="submit" text="Save" color="primary" /></CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -45,12 +45,12 @@ const countries = flags as { name: string }[]
|
||||
</FormGroup>
|
||||
</div>
|
||||
<FormGroup label="Password" labelClass="visually-hidden" for="basic-password" class="">
|
||||
<input type="password" placeholder="Password" class="form-control" id="basic-password" name="password" />
|
||||
<input type="password" placeholder="Password" class="form-control" id="basic-password" name="password" autocomplete="new-password" />
|
||||
</FormGroup>
|
||||
<FormGroup label="Confirm Password" labelClass="visually-hidden" for="basic-password-confirm" class="">
|
||||
<input type="password" placeholder="Confirm Password" class="form-control" id="basic-password-confirm" name="password_confirm" />
|
||||
<input type="password" placeholder="Confirm Password" class="form-control" id="basic-password-confirm" name="password_confirm" autocomplete="new-password" />
|
||||
</FormGroup>
|
||||
<div><Button color="primary" block text="Submit" /></div>
|
||||
<div><Button type="submit" color="primary" block text="Submit" /></div>
|
||||
</form>
|
||||
</CardBody>
|
||||
</Card>
|
||||
@@ -83,7 +83,7 @@ const countries = flags as { name: string }[]
|
||||
<FormGroup label="Message" for="example-message" class="">
|
||||
<textarea placeholder="Enter your message" rows="6" class="form-control" id="example-message" name="message"></textarea>
|
||||
</FormGroup>
|
||||
<div><Button color="primary" block text="Send Message" iconEnd="arrow-right" /></div>
|
||||
<div><Button type="submit" color="primary" block text="Send Message" iconEnd="arrow-right" /></div>
|
||||
</div>
|
||||
</form>
|
||||
</CardBody>
|
||||
@@ -106,12 +106,12 @@ const countries = flags as { name: string }[]
|
||||
<form class="space-y">
|
||||
<div><InputIcon icon="user" placeholder="Username" prepend /></div>
|
||||
<div><InputIcon icon="mail" placeholder="Email address" prepend type="email" /></div>
|
||||
<div><InputIcon icon="lock" placeholder="Password" prepend type="password" /></div>
|
||||
<div><InputIcon icon="lock" placeholder="Confirm Password" prepend type="password" /></div>
|
||||
<div><InputIcon icon="lock" placeholder="Password" prepend type="password" autocomplete="new-password" /></div>
|
||||
<div><InputIcon icon="lock" placeholder="Confirm Password" prepend type="password" autocomplete="new-password" /></div>
|
||||
<div>
|
||||
<div class="row align-items-center">
|
||||
<div class="col"><Check title="Remember me" class="m-0" /></div>
|
||||
<div class="col-auto"><Button color="primary" text="Create Account" iconEnd="arrow-right" /></div>
|
||||
<div class="col-auto"><Button type="submit" color="primary" text="Create Account" iconEnd="arrow-right" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -193,7 +193,7 @@ const countries = flags as { name: string }[]
|
||||
</FormGroup>
|
||||
<div><h4>Address</h4></div>
|
||||
<FormGroup label="Street" for="example-form-street" class="">
|
||||
<input type="text" id="example-form-street" class="form-control" autocomplete="street-address" />
|
||||
<input type="text" id="example-form-street" class="form-control" autocomplete="address-line1" />
|
||||
</FormGroup>
|
||||
<div class="row row-cols-2 g-4">
|
||||
<FormGroup label="City" for="example-form-city" class="">
|
||||
@@ -224,7 +224,7 @@ const countries = flags as { name: string }[]
|
||||
</div>
|
||||
<ButtonList class="justify-content-end">
|
||||
<Button text="Cancel" />
|
||||
<Button color="primary" text="Save Changes" />
|
||||
<Button type="submit" color="primary" text="Save Changes" />
|
||||
</ButtonList>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -77,7 +77,7 @@ const salaries = ['$20K - $50K', '$50K - $100K', '> $100K']
|
||||
</div>
|
||||
|
||||
<div class="mt-5">
|
||||
<button class="btn btn-primary w-100"> Confirm changes </button>
|
||||
<button type="submit" class="btn btn-primary w-100"> Confirm changes </button>
|
||||
<a href="#" class="btn btn-link w-100"> Reset to defaults </a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -13,23 +13,23 @@ import { site } from '@shared/lib/site'
|
||||
<div class="col-lg-6">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<h4>Checked URL</h4>
|
||||
<h2>Checked URL</h2>
|
||||
<div>
|
||||
<pre><code>GET <a class="text-reset" target="_blank" href={site.previewUrl}>{site.previewUrl}</a></code></pre>
|
||||
</div>
|
||||
|
||||
<h4>Request Timing</h4>
|
||||
<h2>Request Timing</h2>
|
||||
<div>
|
||||
<pre>Effective URL <a class="text-reset" target="_blank" href={site.previewUrl}>{site.previewUrl}</a><br />Redirect count 0<br />Name lookup time 3.4e-05<br />Connect time 0.000521<br />Pre-transfer time 0.0<br />Start-transfer time 0.0<br />App connect time 0.0<br />Redirect time 0.0<br />Total time 28.000601<br />Response code 0<br />Return keyword operation_timedout</pre>
|
||||
</div>
|
||||
|
||||
<h4>Response Headers</h4>
|
||||
<h2>Response Headers</h2>
|
||||
<div>
|
||||
<pre>HTTP/1.1 200 Connection established</pre>
|
||||
</div>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<h4>Escalation</h4>
|
||||
<h2>Escalation</h2>
|
||||
<div>Entire team</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
@@ -37,7 +37,7 @@ import { site } from '@shared/lib/site'
|
||||
<div class="col-lg-6">
|
||||
<Card>
|
||||
<CardBody>
|
||||
<h4>Application Log</h4>
|
||||
<h2>Application Log</h2>
|
||||
<div>
|
||||
<pre><code>2024-01-15 14:23:45 [INFO] Application started successfully
|
||||
2024-01-15 14:23:46 [DEBUG] Database connection established
|
||||
@@ -48,7 +48,7 @@ import { site } from '@shared/lib/site'
|
||||
2024-01-15 14:23:51 [DEBUG] API request completed: endpoint=/api/users, duration=234ms</code></pre>
|
||||
</div>
|
||||
|
||||
<h4>Log Levels</h4>
|
||||
<h2>Log Levels</h2>
|
||||
<BadgeList class="mb-2">
|
||||
<Badge text="INFO" color="success" />
|
||||
<Badge text="WARNING" color="warning" />
|
||||
@@ -57,7 +57,7 @@ import { site } from '@shared/lib/site'
|
||||
</BadgeList>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<h4>Log Source</h4>
|
||||
<h2>Log Source</h2>
|
||||
<div>Application Server (prod-01)</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
@@ -8,7 +8,7 @@ import Faq from '@shared/components/marketing/sections/Faq.astro'
|
||||
<MarketingLayout title="Pricing">
|
||||
<header class="hero">
|
||||
<div class="container">
|
||||
<h2 class="hero-title">Simple, transparent pricing</h2>
|
||||
<h1 class="hero-title">Simple, transparent pricing</h1>
|
||||
<p class="hero-description">Get early access to 100+ components and free updates every month. Make it yours today!</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -6,7 +6,7 @@ import Testimonials from '@shared/components/marketing/sections/Testimonials.ast
|
||||
<MarketingLayout title="Testimonials">
|
||||
<header class="hero">
|
||||
<div class="container">
|
||||
<h2 class="hero-title">Trusted by hundreds</h2>
|
||||
<h1 class="hero-title">Trusted by hundreds</h1>
|
||||
<p class="hero-description">Our Users send us bunch of smilies with our services, and we love them 😍</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
+18
-18
@@ -61,109 +61,109 @@ const cardClass = 'position-relative rounded d-block bg-surface-backdrop py-6 w-
|
||||
<div class="col">
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3>Simple modal</h3>
|
||||
<h2>Simple modal</h2>
|
||||
<ModalInline class={cardClass} modalId="simple" show>
|
||||
<SimpleModalContent />
|
||||
</ModalInline>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Large modal</h3>
|
||||
<h2>Large modal</h2>
|
||||
<ModalInline class={cardClass} modalId="large" size="lg" show>
|
||||
<LargeModalContent />
|
||||
</ModalInline>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Small modal</h3>
|
||||
<h2>Small modal</h2>
|
||||
<ModalInline class={cardClass} modalId="small" size="sm" show>
|
||||
<SmallModalContent />
|
||||
</ModalInline>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Full width modal</h3>
|
||||
<h2>Full width modal</h2>
|
||||
<ModalInline class={cardClass} modalId="full-width" size="full-width" show>
|
||||
<FullWidthModalContent />
|
||||
</ModalInline>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Scrollable modal</h3>
|
||||
<h2>Scrollable modal</h2>
|
||||
<ModalInline class={cardClass} modalId="scrollable" scrollable style="max-height: 30rem" show>
|
||||
<ScrollableModalContent />
|
||||
</ModalInline>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Modal with form</h3>
|
||||
<h2>Modal with form</h2>
|
||||
<ModalInline class={cardClass} modalId="report" size="lg" show>
|
||||
<ReportModalContent />
|
||||
</ModalInline>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Success modal</h3>
|
||||
<h2>Success modal</h2>
|
||||
<ModalInline class={cardClass} modalId="success" size="sm" show>
|
||||
<SuccessModalContent />
|
||||
</ModalInline>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Danger modal</h3>
|
||||
<h2>Danger modal</h2>
|
||||
<ModalInline class={cardClass} modalId="danger" size="sm" show>
|
||||
<DangerModalContent />
|
||||
</ModalInline>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Modal with simple form</h3>
|
||||
<h2>Modal with simple form</h2>
|
||||
<ModalInline class={cardClass} modalId="team" show>
|
||||
<TeamModalContent />
|
||||
</ModalInline>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Modal with signature form</h3>
|
||||
<h2>Modal with signature form</h2>
|
||||
<ModalInline class={cardClass} modalId="signature" show>
|
||||
<SignatureModalContent />
|
||||
</ModalInline>
|
||||
</div>
|
||||
<div>
|
||||
<h3>New email modal</h3>
|
||||
<h2>New email modal</h2>
|
||||
<ModalInline class={cardClass} modalId="new-email" show>
|
||||
<NewEmailModalContent />
|
||||
</ModalInline>
|
||||
</div>
|
||||
<div>
|
||||
<h3>New event modal</h3>
|
||||
<h2>New event modal</h2>
|
||||
<ModalInline class={cardClass} modalId="new-event" show>
|
||||
<NewEventModalContent />
|
||||
</ModalInline>
|
||||
</div>
|
||||
<div>
|
||||
<h3>New task modal</h3>
|
||||
<h2>New task modal</h2>
|
||||
<ModalInline class={cardClass} modalId="new-task" show>
|
||||
<NewTaskModalContent />
|
||||
</ModalInline>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Edit profile modal</h3>
|
||||
<h2>Edit profile modal</h2>
|
||||
<ModalInline class={cardClass} modalId="edit-profile" size="lg" show>
|
||||
<EditProfileModalContent />
|
||||
</ModalInline>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Confirm delete modal</h3>
|
||||
<h2>Confirm delete modal</h2>
|
||||
<ModalInline class={cardClass} modalId="confirm-delete" size="sm" show>
|
||||
<ConfirmDeleteModalContent />
|
||||
</ModalInline>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Change password modal</h3>
|
||||
<h2>Change password modal</h2>
|
||||
<ModalInline class={cardClass} modalId="change-password" show>
|
||||
<ChangePasswordModalContent />
|
||||
</ModalInline>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Add task modal</h3>
|
||||
<h2>Add task modal</h2>
|
||||
<ModalInline class={cardClass} modalId="add-task" show>
|
||||
<AddTaskModalContent />
|
||||
</ModalInline>
|
||||
</div>
|
||||
<div id="modal-native">
|
||||
<h3>Native dialog</h3>
|
||||
<h2>Native dialog</h2>
|
||||
<p class="text-secondary">
|
||||
A native <code><dialog></code> opened with <code>showModal()</code>. The browser paints the backdrop and Tabler styles it to match the one used by modals, with
|
||||
<code>.modal-blur</code> blurring the page behind it. Buttons inside <code><form method="dialog"></code> close the dialog without any script. The panel uses the card classes on a child element, because the modal classes read CSS variables set on <code>.modal</code>, and a <code>display</code> value
|
||||
|
||||
@@ -12,7 +12,7 @@ const topTrackIds = [8, 9, 10, 11, 12, 13]
|
||||
<TracksList />
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<h3 class="mb-3">Top tracks</h3>
|
||||
<h2 class="mb-3">Top tracks</h2>
|
||||
|
||||
<div class="row row-cards">
|
||||
{
|
||||
|
||||
@@ -22,7 +22,7 @@ import Icon from '@ui/Icon.astro'
|
||||
<div class="mb-3 text-center">
|
||||
<Avatar person={personById(1)} size="xl" class="avatar-cover rounded-circle mb-3" />
|
||||
<div class="mb-4">
|
||||
<h2 class="h2">Front-End Learning</h2>
|
||||
<h1 class="h2">Front-End Learning</h1>
|
||||
<div class="text-secondary">Learn to build web apps with HTML & CSS. Get started quickly with included templates.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<div class="card card-lg">
|
||||
<div class="card-body">
|
||||
<Prose>
|
||||
<h1>Getting started with documentation <span class="badge">New</span></h1>
|
||||
<h2>Getting started with documentation <span class="badge">New</span></h2>
|
||||
<div class="d-flex align-items-center text-secondary mb-4">
|
||||
<Avatar placeholder="PK" size="sm" class="me-2" />
|
||||
Written by Paweł Kuna · 6 min read
|
||||
@@ -38,7 +38,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2>A quick glossary</h2>
|
||||
<h3>A quick glossary</h3>
|
||||
<dl>
|
||||
<dt>Prose</dt>
|
||||
<dd>Long-form, readable content — articles, changelogs, help center entries.</dd>
|
||||
@@ -48,13 +48,13 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<dd>A shared reference so every writer on the team formats things the same way.</dd>
|
||||
</dl>
|
||||
|
||||
<h2>Adding code examples</h2>
|
||||
<h3>Adding code examples</h3>
|
||||
<p>
|
||||
Inline code looks like <code>console.log("Hello")</code> and uses monospace styling. For anything longer, drop it into a code block, and mention shortcuts with <kbd>Ctrl</kbd> + <kbd>C</kbd> style keys:
|
||||
</p>
|
||||
<pre><code>{`function add(a, b) {\n return a + b;\n}`}</code></pre>
|
||||
|
||||
<h2>Structuring steps and points</h2>
|
||||
<h3>Structuring steps and points</h3>
|
||||
<p>Use an ordered list to walk through a process:</p>
|
||||
<ol>
|
||||
<li>Start with the most important information.</li>
|
||||
@@ -68,7 +68,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<li>Avoid overly long items.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Nesting related items</h3>
|
||||
<h4>Nesting related items</h4>
|
||||
<p>Lists can nest, with indentation and spacing handled automatically:</p>
|
||||
<ul>
|
||||
<li>
|
||||
@@ -88,7 +88,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<li>Sharing</li>
|
||||
</ul>
|
||||
|
||||
<h3>A visual checklist</h3>
|
||||
<h4>A visual checklist</h4>
|
||||
<p>For a status readers can scan at a glance, drop in the steps component instead of a plain list:</p>
|
||||
<ul class="steps steps-vertical steps-counter my-4">
|
||||
<li class="step-item">Draft</li>
|
||||
@@ -99,14 +99,14 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
|
||||
<hr />
|
||||
|
||||
<h2>Supporting images</h2>
|
||||
<h3>Supporting images</h3>
|
||||
<p>Images should support the text and provide useful context, not just decorate the page.</p>
|
||||
<figure>
|
||||
<img src="./static/photos/cup-of-coffee-and-an-open-book.jpg" alt="Open book and coffee" />
|
||||
<figcaption class="text-secondary small mt-2">A quiet spot makes for better writing sessions.</figcaption>
|
||||
</figure>
|
||||
|
||||
<h2>Comparing data in tables</h2>
|
||||
<h3>Comparing data in tables</h3>
|
||||
<p>Tables work best for comparing related data points, like votes on a proposal:</p>
|
||||
<table>
|
||||
<thead>
|
||||
|
||||
@@ -45,6 +45,7 @@ import { site } from '@shared/lib/site'
|
||||
</style>
|
||||
|
||||
<main id="content" class="page page-center align-items-center">
|
||||
<h1 class="visually-hidden">Screenshot</h1>
|
||||
<div class="screenshot d-flex flex-column justify-content-center align-items-center px-12">
|
||||
<div class="screenshot-logo">
|
||||
<Logo gray />
|
||||
|
||||
@@ -67,7 +67,7 @@ const articles: [string, string[]][] = [
|
||||
<div class="row g-5">
|
||||
<div class="col-sm-2">
|
||||
<div class="sticky-top">
|
||||
<h3>Menu</h3>
|
||||
<h2>Menu</h2>
|
||||
<nav class="nav nav-vertical nav-pills" id="pills">
|
||||
{
|
||||
articles.map(([header]) => (
|
||||
@@ -85,7 +85,7 @@ const articles: [string, string[]][] = [
|
||||
{
|
||||
articles.map(([header, paragraphs]) => (
|
||||
<Fragment>
|
||||
<h3 id={`pills-${slug(header)}`}>{header}</h3>
|
||||
<h2 id={`pills-${slug(header)}`}>{header}</h2>
|
||||
{paragraphs.map((paragraph, index) => (
|
||||
<p class={index === paragraphs.length - 1 ? 'mb-6' : undefined}>{paragraph}</p>
|
||||
))}
|
||||
|
||||
@@ -45,7 +45,7 @@ const person = requireIndex(people, 0)
|
||||
<div>
|
||||
<div class="row g-2">
|
||||
<FormGroup label="Email" for="email" labelClass="visually-hidden" class="col-auto">
|
||||
<input type="text" class="form-control w-auto" id="email" name="email" value={person.email} />
|
||||
<input type="email" class="form-control w-auto" id="email" name="email" value={person.email} autocomplete="email" />
|
||||
</FormGroup>
|
||||
<div class="col-auto"><Button text="Change" /></div>
|
||||
</div>
|
||||
|
||||
@@ -15,7 +15,7 @@ import { requireIndex } from '@shared/lib/array'
|
||||
<Logo />
|
||||
</div>
|
||||
|
||||
<h2 class="h3 text-center mb-3">Login to your account</h2>
|
||||
<h1 class="h3 text-center mb-3">Login to your account</h1>
|
||||
|
||||
<SignInForm />
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ const siteEmail = 'support@tabler.io'
|
||||
<SingleLayout title="Sign in link">
|
||||
<div class="text-center">
|
||||
<div class="my-5">
|
||||
<h2 class="h1">Check your inbox</h2>
|
||||
<h1>Check your inbox</h1>
|
||||
|
||||
<p class="fs-3 text-secondary">
|
||||
We've sent you a magic link to <strong>{siteEmail}</strong>.<br />
|
||||
|
||||
@@ -66,7 +66,7 @@ document.querySelector("#signature-advanced-png").addEventListener("click", func
|
||||
<CardBody>
|
||||
<CardTitle>Confirm transfer</CardTitle>
|
||||
<CardSubtitle>Please confirm the transfer of funds by signing below.</CardSubtitle>
|
||||
<form action="">
|
||||
<form>
|
||||
<FormGroup label="First name" required for="signature-first-name">
|
||||
<input type="text" class="form-control" id="signature-first-name" name="first_name" />
|
||||
</FormGroup>
|
||||
|
||||
@@ -7,7 +7,7 @@ import Prose from '@ui/Prose.astro'
|
||||
<SingleLayout title="Terms of service" containerSize="narrow">
|
||||
<div class="card card-md">
|
||||
<div class="card-body">
|
||||
<CardTitle>Terms of service</CardTitle>
|
||||
<CardTitle as="h1">Terms of service</CardTitle>
|
||||
<Prose>
|
||||
<p>
|
||||
We (the folks at Tabler) run a website hosting platform called <a href="https://tabler.io">tabler.io</a> and would love for you to use it. Tabler.io's basic service is free, and we offer paid upgrades for advanced features. Our service is designed to give you as much control and ownership over what goes on your
|
||||
|
||||
@@ -11,7 +11,7 @@ import DocsLink from '@ui/DocsLink.astro'
|
||||
<div class="card card-lg">
|
||||
<div class="card-body">
|
||||
<Prose>
|
||||
<h1>Brewing better coffee at home</h1>
|
||||
<div class="h1">Brewing better coffee at home</div>
|
||||
<p class="lead">Good coffee isn't about expensive gear — it's about <mark>consistency</mark>. Get the ratio, the grind, and the water temperature right, and almost any method will taste better.</p>
|
||||
|
||||
<figure>
|
||||
|
||||
Reference in new issue
Block a user