Introduction

The Underscore Design System (UDS) is built on a “building blocks” approach, providing components and class styling to streamline team workflows and create cohesive landing pages. UDS is based on the Client-First naming convention, with a clear component hierarchy:

Component hierarchy:
1. Foundation - Elements; Typography;
2. Blocks
3. Sections - Global; Detachable; Reusable
4. Slots

Elements

These foundational components form the base of the site. Element components are simple, often single-layered, and easily reusable throughout the site.

Accordion

Accordion

Avatar

Avatar

Badge

Displays a badge or a component that looks like a badge.
Badge
Badge

Buttons

Trigger an action or event, such as submitting a form or displaying a dialog.
Button - Base
Button Label
Button - Secondary Var
Button Label
Button - Primary (Inverse)
Button Label
Button - Secondary (Inverse)
Button Label
Button - Plain
Button Label

Horizontal Line

Dividers bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and hierarchy.
Divider

Form Elements

Dividers bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and hierarchy.
form_field-label
form_input
form_input
is-text-area
form_input
is-select-input
Edit icon via custom code
form_checkbox
form_radio
Form Button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Icon

Icons enhance an experience by providing intuitive and efficient navigation, conveying information concisely, and making it more visually appealing.
Icon

Image

This is some text inside of a div block.
Image

Logo

This is some text inside of a div block.
Logo

Video

This is some text inside of a div block.
Image

Pagination

Pagination with page navigation, next and previous links. You can style the design here but also do check when you activate the pagination on CMS.
Pagination Component

Typography

Use typography components to integrate text seamlessly within the design.

HTML Accessible Heading

The Accessible Heading component organizes content with proper HTML heading levels (<h1> to <h6>) to create a clear, accessible hierarchy.
HTML Accessible Heading
Heading

Section / 🌍 Global

These site-wide sections aren’t directly editable in the right panel. As high-priority elements, they should be modified sparingly. Double-click to edit them when necessary.

Announcement Bar

Promote any information using a fully customizable banner on your website, increase customer awareness and boost sales.
Pagination Component

Footer

Promote any information using a fully customizable banner on your website, increase customer awareness and boost sales.
Pagination Component

Section / 🔁 Reusable

These sections are reusable, featuring a common design layout and media type. Editable elements appear directly in the right-side panel and are prefixed as set by the designer. Consult the designer if new elements are needed to ensure best practices.

Layout / 🧩 Blocks

This is some text inside of a div block.

Announcement Bar

Promote any information using a fully customizable banner on your website, increase customer awareness and boost sales.
Pagination Component

Card Highlight

Displays a card with image, header, and description.
Card Highlight
Sub-account Creation
Streamline payment routing to enhance transaction management

Card Customer Stories

Displays a card with image, header, and description.
Card Highlight
Streamlining Financial Oversight for Tomoro
For companies with multiple branches experiencing rapid business growth, managing cash accurately with a focus on transparency is crucial. Routine cash handling is prone to misuse if not carefully monitored by the headquarters. DOKU has been instrumental in maintaining consistent record-keeping details, making it easier for our headquarters to oversee cash usage across all branches.

Headline Block

Display a title and text description
Headline Block
Heading

Lorem ipsum dolor sit amet, consisttetur adipiscing elite, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fuat nulla pariatur.

Label Row

Perfect for the smaller, simpler component with just an icon and text.
Icon List Component
This is some text inside a div block.

Featured Info Row

Great for the larger, more detailed component with a title, description, and image.
Icon List with Title

AES 256

Lorem ipsum dolor sit amet, consisttetur adipiscing elite,

Section / ⚠️ Detachable

These sections will need to be detach to edit the available content.

Section / 🟨 Slots

These sections will need to be detach to edit the available content.

2-Column Horizontal

Great for the larger, more detailed component with a title, description, and image.
2-col-hor
Heading

Lorem ipsum dolor sit amet, consisttetur adipiscing elite, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad mínimo veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fuat nulla pariatur.

Button Label