Flashcards · derived from the glossary
16 patterns, one sentence each.
Flip a card, mark the ones you know, and follow any card to its full entry. Every back is the first sentence of the entry's definition, generated from the same data, so the deck can never drift from the glossary.
Every card, in the open
- Hero section Layout
- A hero is the first screenful of a page, built to state what the site is and offer one action before the visitor scrolls.
- Pricing table Component
- A pricing table lays out two to four plans side by side so a buyer can compare price, limits and features in one glance.
- Bento grid Layout
- A bento grid is a dense, asymmetric grid of rounded cards in mixed sizes, named after the compartmented lunch box, used to present many features or facts at once without a list.
- Empty state State
- An empty state is what an interface shows when there is nothing to show yet: no items, no results, no history.
- Sticky navigation Component
- A sticky navigation bar stays fixed to the top of the viewport as the page scrolls, so the primary links and the main action are always one movement away.
- Card grid Layout
- A card grid presents a set of like items, each in its own bordered or shadowed container, arranged in equal columns that reflow with the viewport.
- Dark mode Surface
- Dark mode is a second colour scheme in which the page background is dark and text is light, either as the default or as a toggle that follows the visitor's system preference.
- Glassmorphism Surface
- Glassmorphism is a surface treatment where a panel is translucent and blurs whatever sits behind it, like frosted glass, usually with a thin light border to define its edge.
- Big type Typography
- Big type is a layout that uses a very large display size, often past 80 pixels, as the primary visual element in place of imagery.
- Gradient mesh Surface
- A gradient mesh is a background built from several overlapping radial gradients, blurred or blended so the result reads as soft, organic colour with no visible edges.
- Testimonial wall Component
- A testimonial wall is a dense masonry or grid of customer quotes, each with a name, a role and often an avatar, presented as a block of social proof rather than a single featured quote.
- Feature comparison table Component
- A feature comparison table sets a product against alternatives in a grid of checkable rows, one column per option, one row per property, with the product's own column visually promoted.
- FAQ accordion Component
- An FAQ accordion is a stack of questions where each answer is collapsed until its question is clicked, letting a page carry many answers without the length.
- Call-to-action band Component
- A call-to-action band is a full-width strip near the end of a page that restates the offer in one line and repeats the primary action, usually on a contrasting background so it reads as a distinct closing beat.
- Onboarding checklist State
- An onboarding checklist is a short, visible list of setup steps shown to a new user, each marked done as it is completed, that guides the first session toward the moment the product becomes useful.
- Mega footer Layout
- A mega footer is a multi-column footer that lists most of a site's pages under labelled headings, so that any page can be reached from any other in one step.