PARTS GUIDE

UI parts

Names and roles of common web UI parts. The same part can look very different depending on the style.

Hero section

Also called: Hero / Above the fold

The large area seen first when the page opens. Tells visitors what the site is about at a glance and leads to the next action.

Used on

  • Kissa HoshizukiJapanese modernView on page →

  • TasklaneGlassmorphismView on page →

  • THE GRIDBrutalismView on page →

  • Studio KasumiMinimalView on page →

Call-to-action button

Also called: CTA / Primary button

The button for the action the site wants most, such as booking or signing up. Uses a standout color and a short verb-first label.

Used on

Badge

Also called: Label / Pill

A small marker such as "New" or "Limited" placed next to an item. It is not clickable, so it should look different from tags.

Used on

Ticker

Also called: Marquee / News ticker

A strip that keeps scrolling headlines or notices sideways. Eye-catching, but it should stop for people who prefer reduced motion.

Used on

  • THE GRIDBrutalismView on page →

Tabs

Also called: Tab bar / Segmented control

A row of headings that switches the content in one place by category. The selected tab is marked clearly with color or an underline.

Used on

Tag

Also called: Chip

A category label attached to an article or work. Often clickable to list other items with the same label.

Used on

Card

Also called: Tile

A unit that bundles an image, a title and a short description in one box. Repeated in a grid to list articles or news.

Used on

  • Kissa HoshizukiJapanese modernView on page →

  • THE GRIDBrutalismView on page →

Feature grid

Also called: Features / Benefits

Key features laid out side by side as icon, short title and text. Around three items keeps it easy to scan.

Used on

  • Kissa HoshizukiJapanese modernView on page →

  • TasklaneGlassmorphismView on page →

Stats

Also called: Key figures / Metrics

A band of large numbers such as users or years in business, used to build trust. Each number is paired with a short label.

Used on

Pricing table

Also called: Pricing plans / Plan comparison

Plans side by side in columns so price and features can be compared. One recommended plan is usually highlighted.

Used on

  • TasklaneGlassmorphismView on page →

Testimonial

Also called: Review / Quote

Feedback from customers shown as a quote with their name or role. A third party's words add credibility.

Used on

  • Kissa HoshizukiJapanese modernView on page →

  • TasklaneGlassmorphismView on page →

Accordion

Also called: Disclosure / FAQ

A list whose headings open and close their content. Used to fold away long information, like an FAQ.

Used on

  • TasklaneGlassmorphismView on page →

  • Studio KasumiMinimalView on page →

Pagination

Also called: Pager

Splits a long list into pages you can move through by number or "Next". The current page number stands out.

Used on

Form

Also called: Contact form / Input fields

A set of fields for entering details such as a name or date. Every field has a label, and a submit button ends the form.

Used on

  • Kissa HoshizukiJapanese modernView on page →

Newsletter signup

Also called: Email capture / Subscribe box

A compact form that subscribes with just an email address. The field and button sit on a single line.

Used on

  • TasklaneGlassmorphismView on page →

  • THE GRIDBrutalismView on page →