Internal reference for SENTIENT Custom Leather UI patterns, typography, and components.
Lists on the leather site mix semantic HTML (ul, ol, dl) with editorial dividers, timeline markers, and compact key-value rows for specs and checkout summaries.
| Pattern | Value | Used for |
|---|---|---|
| Semantic markup | ul / ol / dl | Use ul for unordered content, ol for ordered steps or progress, and dl for label/value pairs. |
| Editorial dividers | divide-y divide-leather-border | Sample kit and experiments spec lists separate rows with warm editorial dividers. |
| UI dividers | divide-y divide-border | Checkout, order detail, and quantity tier lists use shadcn border tokens. |
| Timeline markers | Numbered circles + connector | About, experiments process, and order progress lists show step state vertically. |
| Interactive lists | role="radiogroup" / accordion buttons | Quantity tiers and FAQ lists expose keyboard-accessible selection or expand/collapse. |
Sample kit inclusions and other warm-paper editorial rows with index numerals.
Classes
divide-y divide-leather-borderitem: flex gap-5 py-7 first:pt-0 last:pb-0 sm:gap-6 sm:py-8Sample
Homepage, process, and experiments FAQ sections with expandable answers.
Classes
divide-yitem: py-5 text-sm font-medium sm:text-baseSample
Yes. Order a color sample or provide a Pantone reference before placing production quantity.
Configurator and quote preview key-value rows for color, texture, sheen, and thickness.
Classes
space-y-3item: flex items-start justify-between gap-4 text-smSample
Experiments homepage specification highlights with label, detail, and oversized value.
Classes
divide-y divide-leather-borderitem: grid gap-2 py-8 first:pt-0 last:pb-0 sm:grid-cols-[minmax(0,1fr)_auto]Sample
About page process steps and order production progress with numbered circles.
Classes
space-y-5item: flex gap-4Sample
Define color, texture, sheen, and thickness.
Approve a sample before production.
Receive hides matched to your specification.
Scroll-animated process list on the experiments homepage with dashed connector line.
Classes
relativeitem: relative flex gap-6 pb-14 sm:pb-16 last:pb-0Sample
Choose color direction and leather character.
Approve material before production.
Quote quantity tier table rendered as divided radio rows.
Classes
divide-y divide-borderitem: grid w-full grid-cols-2 gap-x-3 px-5 py-4 text-left sm:grid-cols-[1fr_1fr_1.2fr]Sample
Order detail and checkout summary label/value pairs.
Classes
divide-y text-smitem: flex items-baseline justify-between gap-4 py-3Sample
Order review line-item spec bullets under product titles.
Classes
space-y-0.5 text-xs text-muted-foregrounditem: text-foreground/80Sample
Preview disclaimer reasons where each list item is its own mini card.
Classes
space-y-3item: rounded-xl border border-border bg-card p-4Sample
Screen variance
Preview color can differ from production due to display calibration.
Sample first
Approve a physical sample before placing production quantity.
Uploaded document lists, help bullets, and compact supporting copy groups.
Classes
space-y-2item: text-sm text-muted-foregroundSample
Footer explore links in a wrapped horizontal list.
Classes
flex max-w-xl flex-wrap justify-end gap-x-6 gap-y-2 text-smitem: text-foreground/80 transition-colors hover:text-foregroundSample
| List | Route | Component | Markup |
|---|---|---|---|
| Sample kit inclusions | /samples | LeatherSamplesContent | ul |
| Homepage FAQ | / | LeatherFaq | div role=list |
| Process FAQ | /process | LeatherFaq | div role=list |
| Experiments specification highlights | /experiments | LeatherExperimentsContent | dl |
| Experiments process timeline | /experiments | LeatherExperimentsProcess | ol |
| About process steps | /about | AboutPage | ol |
| Configurator spec summary | /configurator | LeatherSpecSummary | div rows |
| Quote preview spec summary | /quote | QuotePreviewPanel | div rows |
| Quantity tier selector | /quote | LeatherQuantityTiers | ul |
| Billing summary rows | /quote | BillingStep, PayStep | dl |
| Order progress timeline | /orders/:id | LeatherOrderDetailPage | ol |
| Order detail rows | /orders/:id | LeatherOrderDetailPage | dl |
| Preview disclaimer reasons | /configurator | LeatherCanvasPreview | ul |
| Tax exemption documents | /quote | LeatherTaxExemptionControl | ul |
| Footer navigation links | global | LeatherLayout | ul |