Style Guide

Elements

Headings

H1 The quick brown fox jumps over the lazy dog

H2 The quick brown fox jumps over the lazy dog

H3 The quick brown fox jumps over the lazy dog

H4 The quick brown fox jumps over the lazy dog

H5 The quick brown fox jumps over the lazy dog
H6 The quick brown fox jumps over the lazy dog

List Types

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
    1. List Item 3.1
    2. List Item 3.2
      1. List Item 3.2.1
      2. List Item 3.2.2
    3. List Item 3.3
  4. List Item 4

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3
    • List Item 3.1
    • List Item 3.2
      • List Item 3.2.1
      • List Item 3.2.2
    • List Item 3.3
  • List Item 4

Definition List

Definition Term 1
Definition Description 1
Definition Term 2
Definition Description 2

Tables

A description of the table contents, for accessibility purposes. Hide me with visibility: hidden; if you don't want to show me!
Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
A row with a cell spanning all 3 columns
Table Footer 1 Table Footer 2 Table Footer 3

Text Elements

The a element and external a element examples

The abbr element and an abbr element with title examples

The ACRONYM element example

The b element example

The cite element example

The code element example

The data element example

The del element example

The dfn element and dfn element with title examples

The em element example

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The s element example

The samp element example

The small element example

The span element example

The strong element example

The sub element example

The sup element example

The example

The u element example

The var element example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, turpis et hendrerit commodo, massa purus pellentesque orci, vulputate blandit ipsum velit nec libero. Nam tristique eleifend enim, a suscipit sem maximus nec. Proin lobortis tortor vel sem suscipit euismod. Cras laoreet mattis libero, in viverra erat volutpat ac. Cras porttitor luctus fringilla. Nullam elementum tortor sed velit luctus, quis egestas urna pretium. Curabitur convallis arcu augue, ut feugiat mi vehicula ac. Nam ac tincidunt diam. Vivamus eu neque commodo metus congue luctus. Vivamus tempor molestie ex, eu mollis metus eleifend id. Sed vel condimentum metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer metus urna, rutrum a mauris a, luctus pulvinar odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu scelerisque elit.

Quisque vel fringilla libero, sed ornare nulla. Nulla ac condimentum nisl. Aliquam ac risus ac mauris mattis semper suscipit sit amet nisi. Duis vitae augue ut arcu varius ullamcorper sed a erat. Sed vel ligula at augue maximus dignissim vel ut risus. Sed quis felis pharetra, porta ante ut, malesuada nisi. Pellentesque lacinia turpis ultricies metus bibendum interdum. Mauris vel iaculis quam, eget tincidunt leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque viverra justo ut auctor mattis. Morbi nec est fermentum, interdum velit id, varius tellus. Praesent et tempor ligula. Mauris nulla felis, viverra fermentum magna nec, egestas condimentum felis. Donec imperdiet ipsum ac urna iaculis molestie. Nam malesuada quis justo vitae tincidunt.

Form Elements

Form Elements

Form List

Form Inline

Form Messages

Error message!

Success message!

Components

Buttons

Accordion

Vehicula nec, a vel penatibus amet diam, lobortis semper platea proin scelerisque scelerisque, faucibus pariatur non quis, convallis id inceptos suspendisse nunc bibendum. Id porttitor ac, morbi erat fusce.

Vehicula nec, a vel penatibus amet diam, lobortis semper platea proin scelerisque scelerisque, faucibus pariatur non quis, convallis id inceptos suspendisse nunc bibendum. Id porttitor ac, morbi erat fusce.

Vehicula nec, a vel penatibus amet diam, lobortis semper platea proin scelerisque scelerisque, faucibus pariatur non quis, convallis id inceptos suspendisse nunc bibendum. Id porttitor ac, morbi erat fusce.

Vehicula nec, a vel penatibus amet diam, lobortis semper platea proin scelerisque scelerisque, faucibus pariatur non quis, convallis id inceptos suspendisse nunc bibendum. Id porttitor ac, morbi erat fusce.

Vehicula nec, a vel penatibus amet diam, lobortis semper platea proin scelerisque scelerisque, faucibus pariatur non quis, convallis id inceptos suspendisse nunc bibendum. Id porttitor ac, morbi erat fusce.

Vehicula nec, a vel penatibus amet diam, lobortis semper platea proin scelerisque scelerisque, faucibus pariatur non quis, convallis id inceptos suspendisse nunc bibendum. Id porttitor ac, morbi erat fusce.

Vehicula nec, a vel penatibus amet diam, lobortis semper platea proin scelerisque scelerisque, faucibus pariatur non quis, convallis id inceptos suspendisse nunc bibendum. Id porttitor ac, morbi erat fusce.

Vehicula nec, a vel penatibus amet diam, lobortis semper platea proin scelerisque scelerisque, faucibus pariatur non quis, convallis id inceptos suspendisse nunc bibendum. Id porttitor ac, morbi erat fusce.

Modals

Toggle Dropdown

Menu

Lazy Load Image

Snippet - using the `c-responsive-image` snippet with an image object:

Custom - using `data-sizes="auto"` with custom widths:

Test lazyload image

Vue Test

Icons

Product Item

Dark

( Value)

 

Light

( Value)

 

Colors

Updated standard colors list for 2024 OE Design System

  • OE Primary Bark
    Hex: #544527
    Var: $oe-primary-bark
    Text: .oe-color-primary-bark
    BG: .oe-bg-primary-bark

  • OE Primary Bark Light
    Hex: #79715d
    Var: $oe-primary-bark-light
    Text: .oe-color-primary-bark-light
    BG: .oe-bg-primary-bark-light

  • OE Primary Grey
    Hex: #cac6c0
    Var: $oe-primary-grey
    Text: .oe-color-primary-grey
    BG: .oe-bg-primary-grey

  • OE Primary White
    Hex: #fff
    Var: $oe-primary-white
    Text: .oe-color-primary-white
    BG: .oe-bg-primary-white

  • OE Secondary Cream
    Hex: #f5f3f0
    Var: $oe-secondary-cream
    Text: .oe-color-secondary-cream
    BG: .oe-bg-secondary-cream

  • OE Secondary Ivory
    Hex: #fbfaf8
    Var: $oe-secondary-ivory
    Text: .oe-color-secondary-ivory
    BG: .oe-bg-secondary-ivory

  • OE Secondary Light Green
    Hex: #e9e8df
    Var: $oe-secondary-light-green
    Text: .oe-color-secondary-light-green
    BG: .oe-bg-secondary-light-green

  • OE Secondary Stone
    Hex: #ece5dc
    Var: $oe-secondary-stone
    Text: .oe-color-secondary-stone
    BG: .oe-bg-secondary-stone

  • OE Alert Error
    Hex: #964949
    Var: $oe-alert-error
    Text: .oe-color-alert-error
    BG: .oe-bg-alert-error

  • OE Alert Success
    Hex: #6c6e55
    Var: $oe-alert-success
    Text: .oe-color-alert-success
    BG: .oe-bg-alert-success

  • OE Moss
    Hex: #b9b7a2
    Var: $oe-moss
    Text: .oe-color-moss
    BG: .oe-bg-moss

  • OE Mushroom
    Hex: #bfb3a6
    Var: $oe-mushroom
    Text: .oe-color-mushroom
    BG: .oe-bg-mushroom

  • OE Sand
    Hex: #c1b9a4
    Var: $oe-sand
    Text: .oe-color-sand
    BG: .oe-bg-sand

.container


.container.container--full