Patterns

UI patterns used across the site, shown alphabetically with live examples.

Badge

Status and label indicators for success, warning, and informational contexts.

Success Warning Default

Blockquote

Styled quotation blocks with optional citation.

Design is not just what it looks like and feels like. Design is how it works.

Steve Jobs

Breadcrumbs

Hierarchical site navigation showing the current page location.

Button

Primary call-to-action element with action background and text colors.

Headings

Typographic hierarchy from h1 through h6 using the heading font and scale.

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

Input

Text input and textarea form controls with focus and error states.

Error state, with the icon and the message that says what the field wants.

Form status

Confirmation and failure messages for a submitted form.

Thanks — your message has been sent. I’ll get back to you as soon as I can.

Sorry — your message couldn’t be sent. Please try again, or email me directly at brad@bradbice.com.

Label

Form field labels with optional helper message text.

Lists

Unordered and ordered list styles.

  • Unordered item one
  • Unordered item two
  • Unordered item three
  1. Ordered item one
  2. Ordered item two
  3. Ordered item three

Section

Page section container with optional header, sub-title, and content regions.

Section title

Optional sub-title or description for this section.

Section content goes here. This container constrains max-width and centers on larger viewports.

Switch

Toggle switch used for binary on/off controls.