Skip to main content

Components

Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.

Note

  • HowStuffWorks components are styled using Tailwind.
  • More component code can be seen on Github here.
breadcrumbs Icon

Breadcrumbs

Breadcrumbs are a secondary navigation aid that helps users easily understand the relation between their location on a page (eg. a product page) and higher level pages (eg. a category page).

buttons-and-links Icon

Buttons and Links

Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take.

cards Icon

Cards

A “card” is a UI design pattern that groups related information in a flexible-size container visually resembling a playing card.

carousel Icon

Carousel

A website carousel or slider, is an effective way of displaying multiple images or content in a single space.

filters Icon

Filters

hero Icon

Hero

A hero is one of the first things people see when they visit our sites. It can contain a heading, description and image.

pagination Icon

Pagination

Pagination is the method of separating content into different pages on a website.

select Icon

Select

The select box allows you to offer visitors a dropdown selection of options.

text-field Icon

Text Field

Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.