Components
Accordion
Accordions display a list of high-level options than can expand to reveal more content.
Breadcrumbs
Breadcrumbs are a list of related links that help with site navigation.
Bubble Menu
Bubble Menus are nested menus that display a list of choices or links when it's parent element is interacted with.
Button - Hero
Buttons - hero is the primary button defined by the primaryBoulevard gradient
Button - Icon
Button - Icon is a button that contains an icon and no accompanying text.
Button - Standard
Button - Standard is the secondary button defined by the primary cyan color
Card
A Card is a styled block container for related content of high importance.
Form
Forms are a user interface (UI) element that allows the user to send information to a server.
Horizontal Rule
Use a Horizontal Rule to draw a line to divide content.
Input - Checkbox
Checkbox inputs are used for confirming an option
Input - Combo
Combo inputs are used for combining input elements with button elements
Input - Group
Input groups are used for combining input elements with labels and validations
Input - Radio
Radio inputs are used for selecting an option out of mutiple options
Input - Select
Input Selects are used for choosing an option from a dropdown
Input - Text
Input texts are used for typing information into a user text field.
Input - Textarea
Input textareas are used for typing information requiring 1 sentence or more into a user text field.
Input - Toggle
Toggle inputs are used for selecting a boolean value of on or off.
List
Use a List for unordered or ordered lists of text.
Loading Spinner
Use a Loading Spinner to indicate that a piece of UI is loading on the page.
Navigation
The Navigation component is used as a persistant list of links to various pages on a website.
Screen
The Screen component is used as a fixed container to the browser viewport.
Section
The Section component is used to group content on the webpage with padding.
Table
Use a Table to display data.
Tag
A short piece of interactive text.
Text - Body
Paragraph body text.
Text - Codeblock
A block of code text.
Text - Heading
Heading text in various sizes.
Text - Label
Text for labelling inputs or other UI.
Text - Link
This is a description for link.
Tooltip
Tooltips are used to display useful information on hover of a page element.
Well
A Well is a styled block container for related content of lower importance.
© 2021 Gumgum, Inc.