Layout

Words

All learned. See them in History.

• Badge

  A tiny label stuck on top of something bigger, like "New" on a product or a red number on a bell icon.

• Bento grid

  A grid of boxes in different sizes that fit together neatly, like a bento lunch box.

• Card

  A box that groups one thing: usually a picture, a title, a short text and an action.

• Carousel

  A row of items you move through sideways, with arrows or by swiping.

• Full-bleed

  A picture, video or section that runs to the very edges of the screen, with no margin around it, while the text stays in a narrow column.

• Hero

  The large first section at the top of a page.

• Logo strip

  A row of well-known customer logos, usually under the hero, that says "people you know already use us".

• Segmented control

  One pill-shaped bar split into a few options, where exactly one is picked.

• Stat block

  A few important numbers shown very large, each with a short caption under it.

• Sticky header

  A header that stays at the top of the screen while the page scrolls under it.

• Tabs

  A row of labels where picking one shows its own panel below, and hides the others.

• Zigzag layout

  Feature sections where the picture swaps sides on every row: text left and picture right, then picture left and text right.