Betabrand Styleguide

Molecules

In chemistry, molecules are groups of atoms bonded together, which take on new properties as a result.

In interfaces, molecules are groups of elements that function together as a unit. For example, a form label, search input, and button atom can combine them together to form a search form molecule.

Building up from atoms to molecules encourages a "do one thing and do it well" mentality, and encourages creating reusable interface patterns.

Select Dropdown

Color Select Dropdown

Note: out of date.

Hovercards

Note: needs correction.

User Profile Cards

User Profile Cards w/ Bio

Address Widgets

Image Billboards

Vertical Billboards

Colored Billboards

Alerts

Breadcrumbs

Tabs

Tabs - Centered

Icon List

Vertical Icon List

Pagination

Address

Price

Price w/ Discount

Progress Bar

Meta Data

Tooltips

Crowdfunding Product Cards

Ready to Wear Product Cards

Sizing Chart

Comment

Feature Cards

Cards with Descriptions

Orders Table

Login Modal

Callouts

Polls

Accordion

Carousel