Primary colors

Primary

primary-1000

primary-900

primary-800 (Base)

primary-700

primary-600

primary-500

primary-400

primary-300

primary-200

primary-100

primary-opa-30

primary-opa-10

Secondary

secondary-1000

secondary-900

secondary-800 (Base)

secondary-700

secondary-600

secondary-500

secondary-400

secondary-300

secondary-200

secondary-100

secondary-opa-30

secondary-opa-10

Accent Green

accent-green-1000

accent-green-900

accent-green-800 (Base)

accent-green-700

accent-green-600

accent-green-500

accent-green-400

accent-green-300

accent-green-200

accent-green-100

accent-green-opa-30

accent-green-opa-10

Secondary colors

Map Blue

map-blue-900

map-blue-800 (Base)

map-blue-700

map-blue-500

map-blue-300

map-blue-100

map-blue-opa-30

map-blue-opa-10

Turquoise

turquoise-900

turquoise-800 (Base)

turquoise-700

turquoise-500

turquoise-300

turquoise-100

turquoise-opa-30

turquoise-opa-10

Dark Blue

dark-blue-900

dark-blue-800 (Base)

dark-blue-700

dark-blue-500

dark-blue-300

dark-blue-100

dark-blue-opa-30

dark-blue-opa-10

Violet

violet-900

violet-800 (Base)

violet-700

violet-500

violet-300

violet-100

violet-opa-30

violet-opa-10

Magenta

magenta-900

magenta-800 (Base)

magenta-700

magenta-500

magenta-300

magenta-100

magenta-opa-30

magenta-opa-10

Orange

orange-900

orange-800 (Base)

orange-700

orange-500

orange-300

orange-100

orange-opa-30

orange-opa-10

UI colors

Danger

danger-900

danger-800

danger-700

danger-500

danger-300

danger-100

danger-50

danger-opa-30

danger-opa-10

Warning

warning-900

warning-800

warning-700

warning-500

warning-300

warning-100

warning-50

warning-opa-30

warning-opa-10

Success

success-900

success-800

success-700

success-500

success-300

success-100

success-50

success-opa-30

success-opa-10

Spacings

1px

2px

3px

4px

6px

8px

12px

16px

20px

24px

32px

40px

48px

56px

64px

72px

80px

88px

96px

104px

112px

120px

128px

Roundings

2px

3px

4px

6px

8px

12px

Shadows

Display shadow

shadow xs

shadow s

shadow m

shadow l

shadow xl

Regular

Icon

S

M

L

S

M

L

Brand

Primary

Secondary

Disabled

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Heading with muted text

Example body text

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following is rendered as bold text .

The following is rendered as italicized text .

An abbreviation of the word attribute is attr .

Emphasis classes

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Type	Column heading	Column heading	Column heading
Active	Column content	Column content	Column content
Default	Column content	Column content	Column content

DMP Design Framework

Danmarks Miljøportal

Tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.

Pills

Breadcrumbs

Pagination

1
2
3
4
5

1
2
3
4
5

1
2
3
4
5

Add

Minus

Favorite

Left

Right

Edit

Approve

Reject

Info

Settings

Home

Processing

Link

Lock

Unlock

Delete

User

Sigout

Alerts

Warning!

Best check yo self, you're not looking too good. Nulla vitae a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et .

Oh snap! Change a few things up and try submitting again.

Well done! You successfully read this important alert message .

Heads up! This alert needs your attention , but it's not super important.

Oh snap! Change a few things up and try submitting again.

Well done! You successfully read this important alert message .

Heads up! This alert needs your attention , but it's not super important.

Badges

Primary Secondary Success Danger Warning Info Light Dark

25%

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

List groups

Cras justo odio 14
Dapibus ac facilisis in 2
Morbi leo risus 1

Cras justo odio Dapibus ac facilisis in Morbi leo risus

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.