UI Names

A collection of common good (and bad) ui names.

Layout

• wrapper
• container
• main
• content
• sidebar (aside)
• footer (colophon)

Grid

• gap, padded (gutter modifier)

Typography

• excerpt
• headline
• heading
• title (Subtitle, Pagetitle, Sitetitle)
• lead
• caption
• meta
• eyebrow (type of meta located e.g. above a title)
• measure (utility to prevent long lines of text)
• reduced (utility for smaller font size)
• narrative (wrapper element for cms generated markup)

Blocks

• card, box, tile
• hero, callout, banner
• block
• group
• level
• grid, layout
• summary
• tout

Form

• field, combo (label and form element block)
• input
• input tray
• label (floated)
• toggle
• switch
• select, dropdown

Components

• accordion
• breadcrumb
• button, split button, button group
• badge, label, tag, pill, chip
• carousel, slider, slideshow
• collapse, drawer
• filter
• gallery, media
• menu, navigation
• modal, dialog, popup, alert, lightbox
• off-canvas, mobile-menu,
• pagination
• progress bar, steps
• tooltip, popover
• tabs
• traverse (arrow left and right [<- ->])

Button variations

• call to action, cta (primary button)
• fill (full width button)
• outline (transparent and border only)
• ghost, ninja

Global modifiers

• expanded (full width)
• translucent (container with transparency often image in background)
• sticky
• rounded

Prefixes

• sub-
• is-
• has-

Naming Schemes

• primary, secondary, tertiary, quaternary, quinary
• giga, mega, alpha, beta
• Naming Schemes