United

Ubuntu orange and unique font

Overview

"United" is the Ubuntu look — a warm orange primary and link on a clean white canvas, with an aubergine dark accent. Prose links carry an underline while navigation and control chrome stay clean.

This is a theme from the Bootswatch collection for Bootstrap. The original demo is available at https://bootswatch.com/united/.

Showcase

Featured card

Card title

Sub-title in a card

Card body text with an inline link. The card surfaces the theme's radius, shadow, and inner separator treatments.

Title 1

Subtitle 3

Title 3

Subtitle 5

Title 5

Subtitle 6

Section heading

Body paragraph with configured link hue, which may or may not match the primary brand color. Inline code such as .button.is-primary or the --bulma-primary custom property sits within the running text, so its chip color and padding read against real multi-line prose rather than in isolation. Following the third link shows whether link, hover, and visited states share a tone.

  • List item including another link
  • Apply a token with @use ".../variables" as t
  • Plain list item
Block quotes inherit text color; links inside still follow the theme.

We never share your address.

Theme message

A saturated header with text-on-primary contrast and a plain-toned body. Surfaces how the theme handles "color on color" type.
Tabs surface the active-tab brand color and the boxed modifier's radius/border treatment.
Default Primary Link Info Success Warning Danger

Demo

The .is-secondary cells below use this library's extension colour, added on top of Bulma — see the Color Palette docs.

Box

This is a box with a subtle shadow and some padding.

With media

Alice @alice 3 min
Box can wrap a media object to make a comment / user-card style block.

Button

Colors

Sizes

States

Modifiers

.is-outlined

.is-inverted

.is-rounded

.icon + span (icon button)

.is-static

In context

.field.has-addons (icon buttons)

.field.has-addons (input + button)

.buttons.has-addons (segmented control)

.is-fullwidth

Content

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

A paragraph with a link, strong, emphasis, inline code, and strikethrough text. Inline anchors surface the theme's link hue (Pitfall 8) separately from the heading color above.

Ordered list:

  1. First ordered item
  2. Second ordered item with a link
  3. Third ordered item

Unordered list:

  • First bullet
  • Second bullet with nested children
    • Nested bullet
    • Another nested bullet
  • Third bullet

Definition list:

Term
Definition of the term.
Another term
Another definition with a link.
A blockquote containing body text and a link inside. Block quotes inherit text color but the inner link should still pick up the theme link hue.

Code block:

function hello() {
  return "world";
}

Table inside content:

ColumnValue
A1
B2

Text with subscript and superscript.

Icon

Notification

Colors

Primary notification.
Secondary notification.
Info notification.
Success notification.
Warning notification.
Danger notification.

Light

Primary (light).
Secondary (light).
Info (light).
Success (light).
Warning (light).
Danger (light).

Progress

20% 40% 50% 60% 80%

Table

Default

# Name Role
1AliceDesigner
2BobDeveloper
3CarolProduct

Modifiers

.is-striped.is-hoverable.is-fullwidth + tfoot

# Name Role
1AliceDesigner
2BobDeveloper
3CarolProduct
# Name Role

.is-bordered.is-narrow.is-fullwidth

# Name Role
1AliceDesigner
2BobDeveloper

States

tr.is-selected (selected row)

# Name Role
1AliceDesigner
2BobDeveloper
3CarolProduct

Colors

Color Note
Default(no row modifier)
Primaryis-primary
Secondaryis-secondary
Infois-info
Successis-success
Warningis-warning
Dangeris-danger
Lightis-light
Darkis-dark

In context

.input + .button inside td

# Name Action
1
2

Tag

Default Primary Secondary Info Success Warning Danger
version 1.0.4

Title

Sizes

Title 1

Title 2

Title 3

Title 4

Title 5

Title 6

Subtitle sizes

Subtitle 1

Subtitle 2

Subtitle 3

Subtitle 4

Subtitle 5

Subtitle 6

Modifiers

.is-spaced on title (adds gap before following subtitle)

Spaced title

Subtitle that follows

(no modifier) (tight subtitle)

Default title

Subtitle that follows

Breadcrumb

Card

Default

Default card

No header, no image, no footer

Minimal card with content only. Surfaces the card's body padding, radius, and shadow without other chrome.

Modifiers

.card-header only

With header

Card with a header bar including a header icon.

.card-footer only

With footer

Action items below the body

Card body text.

.card-image only

With card-image

Image strip above the body

.card-image + .card-header + .card-content + .card-footer (full)

Full card

Card title

Image + header + content + footer

All sub-components combined.

In context

.columns.is-one-third (3-column grid)

Card A

Inside .columns is-one-third

Card B

Beside its siblings

Card C

Third card in the row

Dropdown

Message

Colors

Primary

Primary message body.

Secondary

Secondary message body.

Info

Info message body.

Success

Success message body.

Warning

Warning message body.

Danger

Danger message body.

Without header

Body-only message. Useful for inline notes without a dismissible header.

Dark

Dark

Dark message body.

Modal

Pagination

Default

Sizes

States

.pagination-previous[disabled]

Modifiers

.is-centered

.is-right

.is-rounded

Panel

Default

Colors

Tabs

Default

Modifiers

.is-boxed

.is-toggle

Form (General)

Input

Colors

Sizes

States

Modifiers

.is-rounded

textarea

In context

.field with label + .control.has-icons + .help (success)

This email is available

.field with label + .control.has-icons + .help (danger)

Invalid characters in the username

.field.has-addons (select + input + button)

Select

Colors

Sizes

States

Modifiers

.is-rounded

.is-multiple

In context

.field with label + .control.has-icons-left

.field.has-addons (select + input)

Checkbox

Radio

File