Components

Accordion

An "accordion" is a commonly used term to refer to a UI design pattern where sections of content can be expanded or collapsed, arranging the view in more contextual reading format.

Alert

A component that provides immediate feedback to the user, often used for notifications, warnings, or error messages.

Avatar

An "avatar" is typically a small, round or square graphic, often a photo or icon, representing a user or entity.

Banner

A "banner" is a persistent element that stays in the same position at the top of the screen as a user scrolls down a webpage. It often displays critical information.

A "blockquote" is typically used to display a quote or citation. It's often styled differently than surrounding text to highlight the quoted content, with indentation, italicization, or other styling.

Breadcrumbs

"Breadcrumbs" are a type of secondary navigation scheme that reveals the user's location in a website or application. They are a chain of links, usually at the top of the page.

Button

A "button" is a user interface element that users can interact with, typically by clicking or tapping. It's often used to trigger an action or event.

Card

A "card" is a flexible content container with options for headers, footers, images, and a variety of content. It is a popular design pattern used to display information in a concise and modular format, often in a grid layout.

Checkbox

A "checkbox" is a type of input element that allows users to select one or more options from a set.

Dropdown

A dropdown in this context refers to a UI element where a list of options is revealed when interacting (usually clicking) with a trigger element.

File input

The File Input component is a user interface element that allows users to select and upload files from their local device.

Hyperlink

A "hyperlink", or simply a link, is a reference to a document or a section of a document that a user can directly follow, usually by clicking or tapping.

Input

An "input" refers to a form element that allows users to enter data. It's typically used to gather text-based information from users, such as their name, email address, password, etc.

Modal

A "modal" is a dialog box or pop-up window that is displayed on top of the current page. Modals typically contain supplementary content that the user can engage with.

Navigation

A navigation component guides users through different sections or pages of a website. It typically includes links, menus, or icons and is often located in the header or sidebar.

Pagination

The "pagination" component typically appears as a row of numbered links at the bottom of the page, allowing users to navigate forward and backward through the pages.

Radio

A radio component is a type of form input that allows a user to select one option from a list. It's represented visually as a group of circular buttons.

Range slider

A range slider is a form of input that allows users to choose a value or a range of values within a predetermined minimum and maximum limit.

Select

A "select" is a form element that allows users to choose one option (or sometimes multiple options) from a dropdown list.

Slider

A logo slider is a suggested block to be used when there is a need to display a set of partners, initiatives or more that have individual logos

Steps

Steps, also often called a "wizard", "stepper", or "progress tracker" are a design pattern used to divide content or a process into logical, manageable parts.

Tabs

A tab component is a user interface pattern that allows switching between related sections of content, displayed in separate panes but occupying the same space.

Textarea

A "textarea" is a form element that allows multi-line text input from users. It is commonly used for inputs like comments, descriptions or anything that needs to be more than one sentence.

Toggle

A toggle is an interactive component that allows users to switch between two states, like on and off or true and false.

Tooltip

A tooltip is a brief, informative message that appears when a user hovers over or focuses on an element. It's used to provide extra context of a user interface feature.