How it Works

Sections that explain a process: timelines and phases, steps told with photos and cards, rails, tabs and accordions you move through, and grids and panels with a drawn picture of each step.

Each one installs on its own. Preview it at desktop, tablet or mobile width, in either direction. New to blocks? Start with the introduction.

Center Spine Timeline

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-center-spine-timeline

Vertical Timeline Card

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-vertical-timeline-card

Contained Timeline

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-contained-timeline

Phase Line

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-phase-line

Pill Timeline

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-pill-timeline

Numbered Photo Steps

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-numbered-photo-steps

Split Photo + Step List

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-split-photo-step-list

Full-Bleed Step Panel

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-full-bleed-step-panel

Overlay Numeral Cards

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-overlay-numeral-cards

Diagonal Photo Collage

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-diagonal-photo-collage

Photo Bento Steps

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-photo-bento-steps

Fanned Dissolve Cards

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-fanned-dissolve-cards

Stacked Media + Text

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-stacked-media-text

Photo Rail + Progress

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-photo-rail-progress

Tall Visual Rail

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-tall-visual-rail

Step Tabs + Photo Panel

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-step-tabs-photo-panel

Accordion Steps

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-accordion-steps

Orbital Process

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-orbital-process

Six-Card Grid

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-six-card-grid

Column Panels

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-column-panels

Numbered Instruction Panels

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-numbered-instruction-panels

Numbered Editorial Rows

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-numbered-editorial-rows

Split Feature Band

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-split-feature-band

Rounded Cards + Device Crop

Open full screen

Install

bash

npx @smicolon/fasla-ui@latest add how-it-works-rounded-cards-device-crop