Styleguide

XD-font__display-1

Display 1

XD-font__display-2

Display 2

XD-font__display-3

Display 3


h1

Heading 1

h2

Heading 2

h3

Heading 3

h4

Heading 4

h5

Heading 5

h6

Heading 6

XD-font__title-lg

Title Large

XD-font__title-sm

Title Small

body-1

Body 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt risus eget nisl dictum, nec suscipit dui aliquet. Morbi rutrum augue metus, eget dapibus nisl malesuada quis. Pellentesque tempor elit lacus, vitae sodales tortor vestibulum et. Maecenas ut maximus augue. Proin vel lorem vitae risus tempus molestie in ut nisl. Mauris euismod a lorem sed feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean rutrum, dolor mattis aliquam posuere, lacus neque gravida odio, sed volutpat dui dolor at libero. Nam ac nisi eu metus consequat pharetra et vel enim. Cras in urna vitae nisi dapibus egestas.

body-2

Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt risus eget nisl dictum, nec suscipit dui aliquet. Morbi rutrum augue metus, eget dapibus nisl malesuada quis. Pellentesque tempor elit lacus, vitae sodales tortor vestibulum et. Maecenas ut maximus augue. Proin vel lorem vitae risus tempus molestie in ut nisl. Mauris euismod a lorem sed feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean rutrum, dolor mattis aliquam posuere, lacus neque gravida odio, sed volutpat dui dolor at libero. Nam ac nisi eu metus consequat pharetra et vel enim. Cras in urna vitae nisi dapibus egestas.

body-3

Body 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt risus eget nisl dictum, nec suscipit dui aliquet. Morbi rutrum augue metus, eget dapibus nisl malesuada quis. Pellentesque tempor elit lacus, vitae sodales tortor vestibulum et. Maecenas ut maximus augue. Proin vel lorem vitae risus tempus molestie in ut nisl. Mauris euismod a lorem sed feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean rutrum, dolor mattis aliquam posuere, lacus neque gravida odio, sed volutpat dui dolor at libero. Nam ac nisi eu metus consequat pharetra et vel enim. Cras in urna vitae nisi dapibus egestas.

<a href="#" class="XD-btn">primary</a>

Primary

<a href="#" class="XD-btn--dark">secondary</a>

Secondary

<a href="#" class="XD-btn--outline">ghost</a>

Ghost

<a href="#" class="XD-btn--outline-dark">ghost dark</a>

Ghost Dark

<a href="#" class="XD-btn--text">text</a>

Text

red-dark
#992824

red
#BD2C26

orange-dark
#935516

orange-light
#D68027

orange
#AD651B

yellow
#DB9806

cream
#D4CBB3

cream-grey
#B1A58C

gold
#A49463

gold-olive
#8D7F53

brown-olive
#7E6F53

olive
#706543

olive-dark
#564C37

brown
#523F2C

grey-dark
#545454

grey
#999999

black
#231F20