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

This guide currently applies for components of our unified themes.
All demos are based on the WalletGenius theme, unless otherwise noted. Standardized markup and CSS classes apply to all unified theme components.

Accordion

The accordion is a vertically stacked list of items. Each item can be “expanded” or “collapsed” to reveal the content associated with that item.

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

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

Cards

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

Carousel

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

Callouts

Callouts allow the user to create stylized boxes for featured content. These boxes give users a visual cue that the information is important and offset the featured content from the rest of the page.

Checkbox

Checkboxes allow users to select one or more options from a list.

Hamburger

A hamburger menu is an icon used on a website and in apps that, when clicked or tapped, opens a side menu or navigation drawer.

Hero

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

Modal

A modal is a window that appears on top of a parent screen.

Pagination

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

Post Module

Post Modules are highly configurable lists of posts, used throughout our sites.

Radio

The radio button is a selection control element, allowing the user to select one option from a set of several mutually exclusive options.

Search Form

A search box acts as the field for a query input or search term from the user to search and retrieve related information from the database.

Select

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

Tabs

A module tab is a design pattern where content is separated into different panes, and each pane is viewable one at a time.

Tables

Tables are a design pattern for displaying large amounts of data in rows and columns, making them efficient for doing comparative analysis on categorical objects.