refactor: migrate legacy wire namespace to wrn
This commit is contained in:
@@ -164,30 +164,30 @@ page UI {
|
||||
>
|
||||
<div
|
||||
id="component-01"
|
||||
class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 shadow-sm sm:p-8"
|
||||
class="rounded-3xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-raised)] p-6 shadow-sm sm:p-8"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
01. PublicPageShell
|
||||
</p>
|
||||
<h1
|
||||
class="mt-3 text-3xl font-bold text-[var(--wire-color-text)] sm:text-4xl"
|
||||
class="mt-3 text-3xl font-bold text-[var(--wrn-color-text)] sm:text-4xl"
|
||||
>
|
||||
PublicPageShell
|
||||
</h1>
|
||||
<p
|
||||
class="mt-3 text-base leading-7 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-3 text-base leading-7 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
<strong
|
||||
class="text-[var(--wire-color-text)]"
|
||||
class="text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Use case:
|
||||
</strong>
|
||||
Provide the outer structure for a complete public page, including maximum width, page background, overflow handling, before/after slots, and minimum-height behavior.
|
||||
</p>
|
||||
<p
|
||||
class="mt-4 rounded-2xl bg-[var(--wire-color-primary-soft)] px-4 py-3 text-sm text-[var(--wire-color-primary-text)]"
|
||||
class="mt-4 rounded-2xl bg-[var(--wrn-color-primary-soft)] px-4 py-3 text-sm text-[var(--wrn-color-primary-text)]"
|
||||
>
|
||||
This complete page is rendered inside PublicPageShell.
|
||||
</p>
|
||||
@@ -202,20 +202,20 @@ page UI {
|
||||
class="mb-4"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
02. AnnouncementBar
|
||||
</p>
|
||||
<h2
|
||||
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
AnnouncementBar
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
<strong
|
||||
class="text-[var(--wire-color-text)]"
|
||||
class="text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Use case:</strong> Display an important site-wide update, emergency alert, release notice, or time-sensitive action above the primary page content.
|
||||
</p>
|
||||
@@ -239,26 +239,26 @@ page UI {
|
||||
|
||||
<div
|
||||
id="component-03"
|
||||
class="border-y border-[var(--wire-color-border)]"
|
||||
class="border-y border-[var(--wrn-color-border)]"
|
||||
>
|
||||
<div
|
||||
class="mx-auto w-full max-w-7xl px-4 pt-10 sm:px-6 lg:px-8"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
03. PageHeader
|
||||
</p>
|
||||
<h2
|
||||
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
PageHeader
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
<strong
|
||||
class="text-[var(--wire-color-text)]"
|
||||
class="text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Use case:</strong> Introduce an internal or public page with an eyebrow, title, description, icon, breadcrumbs, and primary or secondary actions.
|
||||
</p>
|
||||
@@ -290,20 +290,20 @@ page UI {
|
||||
class="mb-6"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
04. Hero
|
||||
</p>
|
||||
<h2
|
||||
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Hero
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
<strong
|
||||
class="text-[var(--wire-color-text)]"
|
||||
class="text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Use case:</strong> Create the primary marketing or public-information introduction with headline emphasis, supporting content, trust items, actions, and an optional visual area.
|
||||
</p>
|
||||
@@ -333,23 +333,23 @@ page UI {
|
||||
class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
|
||||
>
|
||||
<div
|
||||
class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 sm:p-8"
|
||||
class="rounded-3xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-raised)] p-6 sm:p-8"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
05. HeroActions
|
||||
</p>
|
||||
<h2
|
||||
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
HeroActions
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
<strong
|
||||
class="text-[var(--wire-color-text)]"
|
||||
class="text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Use case:</strong> Group hero buttons with consistent alignment, mobile stacking, orientation, sizing, variants, and responsive behavior.
|
||||
</p>
|
||||
@@ -377,20 +377,20 @@ page UI {
|
||||
class="mb-6"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
06. StatsBar
|
||||
</p>
|
||||
<h2
|
||||
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
StatsBar
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
<strong
|
||||
class="text-[var(--wire-color-text)]"
|
||||
class="text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Use case:</strong> Present a compact row of key facts, service counts, performance indicators, trust signals, or public portal statistics.
|
||||
</p>
|
||||
@@ -415,20 +415,20 @@ page UI {
|
||||
class="mx-auto w-full max-w-7xl px-4 pb-5 sm:px-6 lg:px-8"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
07. Section
|
||||
</p>
|
||||
<h2
|
||||
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Section
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
<strong
|
||||
class="text-[var(--wire-color-text)]"
|
||||
class="text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Use case:</strong> Create predictable page sections with shared spacing, width constraints, surfaces, borders, and responsive vertical rhythm.
|
||||
</p>
|
||||
@@ -444,12 +444,12 @@ page UI {
|
||||
class="p-6 text-center"
|
||||
>
|
||||
<p
|
||||
class="font-semibold text-[var(--wire-color-text)]"
|
||||
class="font-semibold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Content placed inside a Section component
|
||||
</p>
|
||||
<p
|
||||
class="mt-2 text-sm text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-sm text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
The component owns spacing, surface, borders, and content width.
|
||||
</p>
|
||||
@@ -465,20 +465,20 @@ page UI {
|
||||
class="mb-6"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
08. SectionHeader
|
||||
</p>
|
||||
<h2
|
||||
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
SectionHeader
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
<strong
|
||||
class="text-[var(--wire-color-text)]"
|
||||
class="text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Use case:</strong> Add a consistent heading block to content sections, including eyebrow text, description, icon slot, action slot, alignment, and heading level.
|
||||
</p>
|
||||
@@ -497,7 +497,7 @@ page UI {
|
||||
data-slot="icon"
|
||||
>
|
||||
<span
|
||||
class="inline-flex size-11 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]"
|
||||
class="inline-flex size-11 items-center justify-center rounded-2xl bg-[var(--wrn-color-primary-soft)] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
<span
|
||||
class="icon-[lucide--heading-2] size-5"
|
||||
@@ -511,7 +511,7 @@ page UI {
|
||||
>
|
||||
<a
|
||||
href="#component-09"
|
||||
class="font-semibold text-[var(--wire-color-primary)]"
|
||||
class="font-semibold text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
Next component
|
||||
</a>
|
||||
@@ -527,20 +527,20 @@ page UI {
|
||||
class="mb-6"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
09. MarketingSectionHeader
|
||||
</p>
|
||||
<h2
|
||||
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
MarketingSectionHeader
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
<strong
|
||||
class="text-[var(--wire-color-text)]"
|
||||
class="text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Use case:</strong> Introduce marketing, services, solutions, features, benefits, case studies, or product sections with a prominent optional action.
|
||||
</p>
|
||||
@@ -562,23 +562,23 @@ page UI {
|
||||
class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
|
||||
>
|
||||
<div
|
||||
class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 sm:p-8"
|
||||
class="rounded-3xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-raised)] p-6 sm:p-8"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
10. TextLink
|
||||
</p>
|
||||
<h2
|
||||
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
TextLink
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
<strong
|
||||
class="text-[var(--wire-color-text)]"
|
||||
class="text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Use case:</strong> Provide a lightweight inline action for “view all,” “learn more,” “open documentation,” or related navigation without using a full button.
|
||||
</p>
|
||||
@@ -607,20 +607,20 @@ page UI {
|
||||
class="mb-6"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
11. FeatureGrid
|
||||
</p>
|
||||
<h2
|
||||
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
FeatureGrid
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
<strong
|
||||
class="text-[var(--wire-color-text)]"
|
||||
class="text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Use case:</strong> Arrange services, features, solutions, benefits, or linked capabilities in a responsive equal-height grid.
|
||||
</p>
|
||||
@@ -659,20 +659,20 @@ page UI {
|
||||
class="mb-6"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
12. FeatureCard
|
||||
</p>
|
||||
<h2
|
||||
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
FeatureCard
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
<strong
|
||||
class="text-[var(--wire-color-text)]"
|
||||
class="text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Use case:</strong> Present a linked feature or service with an icon, title, description, badge, visual variant, hover treatment, and action label.
|
||||
</p>
|
||||
@@ -703,20 +703,20 @@ page UI {
|
||||
class="mb-6"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
13. FeatureIconCard
|
||||
</p>
|
||||
<h2
|
||||
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
FeatureIconCard
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
<strong
|
||||
class="text-[var(--wire-color-text)]"
|
||||
class="text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Use case:</strong> Highlight a capability where the icon treatment should carry stronger visual importance than a standard feature card.
|
||||
</p>
|
||||
@@ -747,20 +747,20 @@ page UI {
|
||||
class="mb-6"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
14. MetricGrid
|
||||
</p>
|
||||
<h2
|
||||
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
MetricGrid
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
<strong
|
||||
class="text-[var(--wire-color-text)]"
|
||||
class="text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Use case:</strong> Arrange operational values, KPIs, public statistics, usage summaries, or service indicators in a responsive grid.
|
||||
</p>
|
||||
@@ -786,20 +786,20 @@ page UI {
|
||||
class="mb-6"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
15. MetricCard
|
||||
</p>
|
||||
<h2
|
||||
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
MetricCard
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
<strong
|
||||
class="text-[var(--wire-color-text)]"
|
||||
class="text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Use case:</strong> Display one metric with a label, value, suffix, description, icon, trend, status direction, and optional action.
|
||||
</p>
|
||||
@@ -832,20 +832,20 @@ page UI {
|
||||
class="mb-6"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
16. SplitHero
|
||||
</p>
|
||||
<h2
|
||||
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
SplitHero
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
<strong
|
||||
class="text-[var(--wire-color-text)]"
|
||||
class="text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Use case:</strong> Build a two-column introduction that balances descriptive content and a visual, screenshot, feature panel, image, map, or media block.
|
||||
</p>
|
||||
@@ -870,20 +870,20 @@ page UI {
|
||||
data-slot="visual"
|
||||
>
|
||||
<div
|
||||
class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-8 shadow-lg"
|
||||
class="rounded-3xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-raised)] p-8 shadow-lg"
|
||||
>
|
||||
<span
|
||||
class="icon-[lucide--layout-dashboard] size-14 text-[var(--wire-color-primary)]"
|
||||
class="icon-[lucide--layout-dashboard] size-14 text-[var(--wrn-color-primary)]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
</span>
|
||||
<h3
|
||||
class="mt-5 text-xl font-bold text-[var(--wire-color-text)]"
|
||||
class="mt-5 text-xl font-bold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Visual content area
|
||||
</h3>
|
||||
<p
|
||||
class="mt-2 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
Add a product screenshot, service diagram, dashboard, image, or interactive preview.
|
||||
</p>
|
||||
@@ -900,20 +900,20 @@ page UI {
|
||||
class="mx-auto w-full max-w-7xl px-4 pb-6 sm:px-6 lg:px-8"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
17. CTASection
|
||||
</p>
|
||||
<h2
|
||||
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
CTASection
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
<strong
|
||||
class="text-[var(--wire-color-text)]"
|
||||
class="text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Use case:</strong> Close a page or major section with a strong conversion action such as registration, sign-in, contact, application, service request, or documentation access.
|
||||
</p>
|
||||
@@ -942,28 +942,28 @@ page UI {
|
||||
class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
|
||||
>
|
||||
<div
|
||||
class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 sm:p-8"
|
||||
class="rounded-3xl border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-raised)] p-6 sm:p-8"
|
||||
>
|
||||
<p
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
|
||||
class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wrn-color-primary)]"
|
||||
>
|
||||
18. BackToTop
|
||||
</p>
|
||||
<h2
|
||||
class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
|
||||
class="mt-2 text-2xl font-bold text-[var(--wrn-color-text)]"
|
||||
>
|
||||
BackToTop
|
||||
</h2>
|
||||
<p
|
||||
class="mt-2 text-[var(--wire-color-text-muted)]"
|
||||
class="mt-2 text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
<strong
|
||||
class="text-[var(--wire-color-text)]"
|
||||
class="text-[var(--wrn-color-text)]"
|
||||
>
|
||||
Use case:</strong> Provide a floating control on long pages that returns visitors to the top and can optionally show scroll progress.
|
||||
</p>
|
||||
<p
|
||||
class="mt-4 text-sm text-[var(--wire-color-text-muted)]"
|
||||
class="mt-4 text-sm text-[var(--wrn-color-text-muted)]"
|
||||
>
|
||||
Scroll down the page until the floating button becomes visible.
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user