v1.0

Style Guide

A streamlined design system built on Bootstrap, offering consistency, flexibility, and efficiency

Built by BRND WGN

Typography

Display Headings

Display 1

Display 2

Display 3

Headings

H1 Headings

Heading 1

H2 Headings

Heading 2

H3 Headings

Heading 3

H4 Headings

Heading 4

H5 Headings

Heading 5

H6 Headings

Heading 6

h1 class

h2 class

h3 class

h4 class

h5 class

h6 class

Body

All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

All Links

Text Link

All Quotes

Block Quote

All Ordered Lists

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.

All Unordered Lists

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.

lead

Large Font Size

small

Small Font Sizes

xsmall

Extra Small Font Sizes

Body Styles

text-lowercase

text-lowercase

text-uppercase

text uppercase

text-capitalize

text capitalize

font-black

Font Black (Weight 900)

font-bold

Font Bold (Weight 700)

font-semibold

Font Semibold (Weight 600)

font-medium

Font Medium (Weight 500)

text-nowrap

Text Nowrap

text-style-link

Text Style Link

font-italic

Font Italic

font-regular

Font Regular (Weight 400)

font-light

Font Light (Weight 300)

font-extralight

Font Extralight (Weight 200)

font-thin

Font Thin (Weight 100)

Text Alignments (Responsive, Mobile First)

text-left

text-sm-left

text-md-left

text-lg-left

text-xl-left

text-xxl-left

text-center

text-sm-center

text-md-center

text-lg-center

text-xl-center

text-sm-center

text-xxl-center

text-right

text-sm-right

text-md-right

text-lg-right

text-xl-right

text-xxl-right

Colours

Text Colours

text-primary

text-secondary

text-tertiary

text-quaternary

text-quintinary

text-black

text-grey-darkest

text-grey-darker

text-grey-dark

text-grey-lightest

text-grey-lighter

text-grey-light

text-grey-medium

text-white

Background Colours

bg-primary

bg-secondary

bg-tertiary

bg-quaternary

bg-quintinary

bg-black

bg-grey-darkest

bg-grey-darker

bg-grey-dark

bg-grey-lightest

bg-grey-lighter

bg-grey-light

bg-grey-medium

bg-white

Buttons

btn-primary

Button Text

btn-secondary

Button Text

btn-tertiary

Button Text

Paddings (Responsive, mobile first)

Utility spacing system - padding classes.
[padding-direction] + [padding-size/4].

e.g.
- pt-1 = 4px
- pt-2 = 8px
- pt-3 = 12px
- pt-4 = 16px

Available directions
- pt: padding-top
- pb: padding bottom
- pl: padding-left
- pr: padding-right
- px: padding-left and padding-right
- py: padding-top and padding-bottom

Responsive Options
- pt-0: Mobile and up
- pt-sm-0: Horizontal Mobile and up
- pt-md-0: Tablet and up
- pt-lg-0: Small Desktop and up
- pt-xl-0: Large Desktop and up (1280px +)
- pt-xxl-0: Extra Large Displays (1440px +)
‍

Margins (Responsive, mobile first)

Utility spacing system - margin classes.
[margin-direction] + [margin-size/4].

e.g.
- mt-1 = 4px
- mt-2 = 8px
- mt-3 = 12px
- mt-4 = 16px

Available directions
- mt: padding-top
- mb: padding bottom
- ml: padding-left
- mr: padding-right
- mx: padding-left and padding-right
- my: padding-top and padding-bottom

Responsive Options
- mt-0: Mobile and up
- mt-sm-0: Horizontal Mobile and up
- mt-md-0: Tablet and up
- mt-lg-0: Small Desktop and up
- mt-xl-0: Large Desktop and up (1280px +)
- mt-xxl-0: Extra Large Displays (1440px +)
‍

Display Properties (Responsive, Mobile First)

For further reading please refer to https://getbootstrap.com/docs/4.0/utilities/display/

d-none

d-inline

d-line text - Sets the element to behave like an inline element

d-inline-block

d-inline-block text - The element still appears on the same line as other inline or inline-block elements, but unlike d-inline, you can set its width and height.

d-block

d-block text - The element takes up the full width of its container (100% width) by default. It starts on a new line, pushing any content before or after it onto separate lines.

d-flex

d-flex - This enables a flexible layout structure, allowing you to align and distribute space among child elements efficiently. Flexbox is highly useful for creating responsive designs and complex layouts without using float-based or block-based methods.

Hiding Elements (Responsive, Mobile First)

d-none

Hidden on all

d-md-none d-lg-block

Hidden only on md

d-block

Visible on all

d-none d-md-block d-lg-none

Visible only on md

d-none d-sm-block

Hidden only on xs

d-lg-none d-xl-block

Hidden only on lg

d-block d-sm-none

Visible only on xs

d-none d-lg-block d-xl-none

Visible only on lg

d-sm-none d-md-block

Hidden only on sm

d-xl-none

Hidden only on xl

d-none d-sm-block d-md-none

Visible only on sm

d-none d-xl-block

Visible only on xl

Flex Properties

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For a more detailed explanation please refer to https://getbootstrap.com/docs/4.0/utilities/flex/

Flex Behaviours

d-flex

Applies a flexbox display to an element, enabling flex container behavior.

d-sm-flex

Applies flexbox display on small screens (≥576px) and up.

d-md-flex

Activates flexbox display on medium screens (≥768px) and up.

d-lg-flex

Applies flexbox display on large screens (≥992px) and up.

d-xl-flex

Activates flexbox display on extra-large screens (≥1200px) and up.

Flex Direction

Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row.

flex-row

Arranges flex items in a horizontal row within a flex container. (browser default)

flex-row-reverse

Arranges flex items in a horizontal row but in reverse order, placing the last item first and the first item last.

flex-column

Arranges flex items in a vertical column within a flex container.

flex-column-reverse

Arranges flex items in a vertical column but in reverse order, placing the last item at the top and the first item at the bottom.

Justify Content

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around.

justify-content-start

Aligns flex items to the start of the flex container (left for LTR layouts).

justify-content-end

Aligns flex items to the end of the flex container (right for LTR layouts).

justify-content-center

Centers flex items horizontally within the flex container.

justify-content-between

Distributes flex items evenly, with space between them and no space at the start or end.

justify-content-around

Distributes flex items evenly with space around them, including space at the start and end.

Align Items

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).

align-items-start

Aligns flex items to the top of the flex container.

align-items-end

Aligns flex items to the bottom of the flex container.

align-items-center

Centers flex items vertically within the flex container.

align-items-baseline

Aligns flex items along their baselines within the flex container.

align-items-stretch

Stretches flex items to fill the height of the flex container.

Align Self

align-self-start

Aligns flex items to the top of the flex container.

align-self-end

Aligns flex items to the bottom of the flex container.

align-self-center

Centers flex items vertically within the flex container.

align-self-baseline

Aligns flex items along their baselines within the flex container.

align-self-stretch

Stretches flex items to fill the height of the flex container.

Difference between align-items and align-self

Layout

Col 12 on phone, col-8 on desktop with a 2 col offset .. bg applied directly to col (including gutter padding)

Col 12 on phone, col-8 on desktop with a 4 col offset .. bg applied inside col, excluding gutter padding

col 12 on phone, col 6 desktop ... bg applied inside col, excluding gutter padding

col 12 on phone, col 6 desktop

col 12 on phone, col 8 desktop

col 12 on phone, col 4 desktop

This text is nested in a container which is nested in a bg-grey class

col 12, col sm 6, coi md 4, col-lg 3 columns, pod which is rounded circle (aspect ratio 1-1)

col 12, col sm 6, coi md 4, col-lg 3 columns, pod which is rounded 6 (24px) (aspect ratio 1-1)

col 12, col sm 6, coi md 4, col-lg 3 columns, pod which is rounded 2 (8px) (aspect ratio 1-1)

Rich Text

rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 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 fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Forms

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript