Style Guide

A set of guidelines and strategies created by MBN to help you build Bricks websites.

Headings

Defines the scale, weight, and usage of text elements to ensure content is legible and structured.

Heading--H1

I am a heading

H1

I am a heading

Heading--H2

I am a heading

H2

I am a heading

Heading--H3

I am a heading

H3

I am a heading

Heading--H4

I am a heading

H4

I am a heading

Rich text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.

‍Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Other HTML Tags

Defines the default text styles.

P

Here goes your text ... Select any part of your text to access the formatting toolbar.

Quote

Here goes your text … Select any part of your text to access the formatting toolbar.

Unordered list

  • liHere goes your text … Select any part of your text to access the formatting toolbar.
  • Here goes your text … Select any part of your text to access the formatting toolbar

Ordered list

  1. Here goes your text … Select any part of your text to access the formatting toolbar.
  2. Here goes your text … Select any part of your text to access the formatting toolbar.

Text Classes

Defines the scale, weight, and usage of text elements to ensure content is legible and structured when typography style doesn't match the default HTML tag.

Text Sizes

Text-xl

Here goes your text ... Select any part of your text to access the formatting toolbar.

Text-lg

Here goes your text ... Select any part of your text to access the formatting toolbar.

Text-md

Here goes your text ... Select any part of your text to access the formatting toolbar.

Text-sm

Here goes your text ... Select any part of your text to access the formatting toolbar.

Text-xs

Here goes your text ... Select any part of your text to access the formatting toolbar.

Text Styles

Text Italic

Here goes your text ... Select any part of your text to access the formatting toolbar.

Text-All-caps

Here goes your text ... Select any part of your text to access the formatting toolbar.

Text-underline

Here goes your text ... Select any part of your text to access the formatting toolbar.

Text-strikethrough

Here goes your text ... Select any part of your text to access the formatting toolbar.

Text Alignment

Text left

Here goes your text ... Select any part of your text to access the formatting toolbar.

Text-center

Here goes your text ... Select any part of your text to access the formatting toolbar.

Text-right

Here goes your text ... Select any part of your text to access the formatting toolbar.

Buttons & Interactive

Standardized interactive elements to guide user actions and form inputs.

Buttons

btn

I am a button

btn--large

I am a button

btn--small

I am a button

btn-outline

I am a button

btn--secondary

I am a button

btn--primary

I am a button

Form

my-form

Name
Name

Colors

Manage recurring text and background colors.

Text Colors

text-color-primary

Text Color Primary

text-color-secondary

Text Color Secondary

text-color-muted

Text Color Muted

text-color-alternate

Text Color Alternate

Background Colors

bg-color-primary

bg-color-secondary

bg-color-brand

bg-color-dark

Colors

Manage recurring text and background colors.