Skip to content

DOBT Style Guide

Forms

Form elements

Text

Use hint text if the input can't be fully described by its label. Keep this text brief.
You must include Autosize to implement this functionality.
Toggle source

Multiple Choice

What are your thoughts on the Bilderberg Group? *
Which of the group(s) below most accurately represent you? *
Do you agree to the Terms of Service?
Checkbox fields can contain a single answer option where appropriate.
This administrator can access…
This is a partially selected checkbox. In this example, only some items are selected.
Toggle source

Basic dropdowns

Toggle source

Rich-text dropdowns

This component lets you add long answer options, or descriptive text to each option, while imitating the behavior of a native <select>.

Toggle source

States

Disabled / “read only”

Is the sky blue? *
Which countries border the United States? *
Toggle source

Error

There was an error!
Toggle source

Appearance

Large inputs

Toggle source

Small inputs

Use small inputs to style advanced, information-dense options. Or, place them under regular inputs to differentiate primary and secondary settings.

Toggle source

Horizontal Forms

When using horizontal forms, keep each label brief.

What are your thoughts on the Bilderberg Group? *
Include... *
Toggle source

Input groups

years young
Pick a date and time *
Toggle source

Filter form

Toggle source

Microcopy Box

Use this to display additional actions that should be hidden until a setting is enabled.

To accept payments, you must first sign in to your payment provider.

Connect to Stripe
Toggle source

Buttons

Simple

Toggle source

Toggle buttons

Use the .toggle class for buttons which summon a dropdown.

Toggle source

Button with icons

Toggle source

Disabled

Buttons with the .subtle class have no disabled state. Instead, they should not be displayed on the page.

Toggle source

Button sizes

Toggle source

Long buttons

When a button with a long CTA is inside a limited-width container, add the .long class to avoid truncation with ellipsesToggle source

Tertiary buttons

Add the .uppercase or .button_uppercase class to any link to downplay a tertiary action. For example:

Contact Your Local Representative

Send an email

Toggle source