Components

While layout is more about the overall structure of the page, components are the specific blocks you use to populate that structure. Each component has a distinct design and purpose.

Banners

Alerts

Signify key actions or time-sensitive information.

Promos

Reinforce a primary idea or call-to-action.

Heroes

Use a large photo to establish an emotional connection.

Highlights

Boxouts

Call attention to an idea with a colored background.

Panels

Utilize text and an accompanying portrait-oriented photo.

Showcase

Group similar content with enhanced interactivity.

Metrics

Feature supporting figures, rankings, or statistics.

Carousels

Present images and/or text in a section that scrolls horizontally.

Accordions

Break up large runs of text with skimmable, expandable headings.

Calls to action

Links

Hyperlink text in a content area, or use arrows on their own line.

Buttons

A more prominent callout with options for solid/outline and background colors.

Cards

A link with its own context; can be used with or without a photo.

Icons

Accent text or calls to action.

Typographical

Paragraphs, headings, and lists

The basic building blocks of any web page.

Quotes

Stylize memorable quotes and drive home the main point of a story.

Eyebrows

Enhance scannability with a concise label.

Technical

Advanced class names

Further customize blocks; bend the rules a little bit!

Columns and containers

Arrange blocks in interesting layouts.

ClarkU WordPress