Styleguide

DMT relaunch - styleguide

Branding

Logos

Available font families and weights

Circular Book / 400

circular-light

Circular Black, Bold / 700

circular-bold

Elements

Basic paragraph styling.

Lorem ipsum dolor sit amet, consectetur adipisicing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Default heading styles

Lorem ipsum dolor sit amet

Unordered List

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium maiores soluta velit eius facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium maiores soluta velit eius facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium maiores soluta velit eius facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium maiores soluta velit eius facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium maiores soluta velit eius facilis.

Ordered List

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium maiores soluta velit eius facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium maiores soluta velit eius facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium maiores soluta velit eius facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium maiores soluta velit eius facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Praesentium maiores soluta velit eius facilis.

Table

Table Head
Tellus Inceptos Ridiculus	Malesuada Ornare Ipsum Vestibulum
Magna Nullam	Cras Sollicitudin Mollis Amet
Nibh Pellentesque	Etiam Ornare Condimentum Tellus Ultricies
Bibendum	Praesent commodo Cursus magna Scelerisque consectetur Praesent commodo Cursus magna Scelerisque consectetur
Nibh Pellentesque Amet	Quam Consectetur

Link

Ich bin ein normaler Text Link

Objects

Section

The section object adds vertical spacing to the bottom of an element. There are modifiers available to change the spacing: .o-section--lg and .o-section--xl.

Container

The container object adds a max-width and centers the content horizontally.
Modifier which can be used to further limit the max width are: .o-container--sm