Kofinanziert von der Europäischen Union
Ministerium für Wirtschaft, Industrie, Klimaschutz und Energie des Landes Nordrhein-Westfalen
Kofinanziert von der Europäischen Union
Ministerium für Wirtschaft, Industrie, Klimaschutz und Energie des Landes Nordrhein-Westfalen

Farben

Hauptkommunikation EFRE/JTF

  • $main-night-blue
    .bg-main-night-blue
  • $main-sky-blue
    .bg-main-sky-blue
  • $main-green
    .bg-main-green
  • $main-green-medium
    .bg-main-green-medium
  • $main-green-light
    .bg-main-green-light
  • $main-turquoise
    .bg-main-turquoise
  • $main-turquoise-medium
    .bg-main-turquoise-medium
  • $main-turquoise-light
    .bg-main-turquoise-light

Gründung und Digitalisierung

  • $topic-red
    .bg-topic-red
  • $topic-red-medium
    .bg-topic-red-medium
  • $topic-red-light
    .bg-topic-red-light

Strategische Technologien

  • $topic-orange
    .bg-topic-orange
  • $topic-orange-medium
    .bg-topic-orange-medium
  • $topic-orange-light
    .bg-topic-orange-light

Innovation und Forschung

  • $topic-blue
    .bg-topic-blue
  • $topic-blue-medium
    .bg-topic-blue-medium
  • $topic-blue-light
    .bg-topic-blue-light

Klimaschutz

  • $topic-green
    .bg-topic-green
  • $topic-green-medium
    .bg-topic-green-medium
  • $topic-green-light
    .bg-topic-green-light

Transformation

  • $topic-dark-green
    .bg-topic-dark-green
  • $topic-dark-green-medium
    .bg-topic-dark-green-medium
  • $topic-dark-green-light
    .bg-topic-dark-green-light

Stadt und Region

  • $topic-purple
    .bg-topic-purple
  • $topic-purple-medium
    .bg-topic-purple-medium
  • $topic-purple-light
    .bg-topic-purple-light

UI-Farben

  • $disabled-button-color
  • $pagination-bg
  • $menu-item-hover-bg
  • $dropdown-item-hover
  • $chip-bg
  • $indicator-dots-inactive

Typographie

Überschrift 1

<h1>Lorem ipsum dolor</h1>
<span class="h1">Lorem ipsum dolor</span>

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5
Überschrift 5
<h5 class="font-weight-normal">Lorem ipsum dolor</h5>
<span class="h5 font-weight-normal">Lorem ipsum dolor</span>
Überschrift 6
Überschrift 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eius labore modi neque numquam optio porro praesentium reiciendis, repellat unde! Dolorem enim exercitationem nam officiis veniam! Mollitia nostrum quos reiciendis!

<p class="copy-large">Lorem ipsum dolor...</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eius labore modi neque numquam optio porro praesentium reiciendis, repellat unde! Dolorem enim exercitationem nam officiis veniam! Mollitia nostrum quos reiciendis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi cumque, dicta dolor eos est non numquam officia reiciendis repudiandae ut. Cupiditate error minus molestiae nisi omnis praesentium quibusdam saepe voluptatum. Alias at deserunt doloribus expedita fugiat illum in iste, magni nihil non, omnis provident quibusdam quis soluta tempore voluptate voluptatem. Ad, cupiditate neque.

Accusamus eaque illo libero odio quia totam. Animi autem commodi deleniti excepturi illo maiores quibusdam temporibus vel voluptatum! Ab accusamus aut autem commodi dignissimos dolores id iusto, laudantium minima molestiae odit officiis, quam rem repellat veritatis vitae! Culpa dolor earum est id laborum magni nemo quae, quidem, quos, sed suscipit tenetur unde veniam? Dolor eveniet minima quo repellat unde. Cum eveniet excepturi fugiat optio rem? Perspiciatis, velit! Aut consectetur distinctio tempora totam. Iste, labore, voluptatibus. Aut doloribus maiores nihil quibusdam quisquam totam veniam. A accusamus asperiores consequuntur fugiat incidunt inventore, nam obcaecati, quisquam rerum similique veritatis voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eius labore modi neque numquam optio porro praesentium reiciendis, repellat unde! Dolorem enim exercitationem nam officiis veniam! Mollitia nostrum quos reiciendis!
<blockquote>Lorem ipsum dolor...</blockquote>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eius labore modi neque numquam optio porro praesentium reiciendis, repellat unde! Dolorem enim exercitationem nam officiis veniam! Mollitia nostrum quos reiciendis!

<p class="bold">Lorem ipsum dolor...</p>

Buttons

Button element

<button class="btn btn-primary">Primary Button <i class="fa fa-arrow-right" aria-hidden="true"></i></button>
<button class="btn btn-secondary">Secondary Button <i class="fa fa-sliders" aria-hidden="true"></i></button>
<button class="btn btn-tertiary">Tertiary Button <i class="fa fa-sliders" aria-hidden="true"></i></button>
<button class="btn btn-text">Text Button <i class="fa fa-arrow-right" aria-hidden="true"></i></button>

Anchor element

Primary Button
<a href="#" class="btn btn-primary">Primary Button <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
<a href="#" class="btn btn-primary btn-icon btn-animate">Primary Button</a>
Secondary Button
<a href="#" class="btn btn-secondary">Secondary Button <i class="fa fa-sliders" aria-hidden="true"></i></a>
<a href="#" class="btn btn-secondary btn-icon btn-icon-sliders">Secondary Button</a>
Tertiary Button
<a href="#" class="btn btn-tertiary">Tertiary Button <i class="fa fa-sliders" aria-hidden="true"></i></a>
<a href="#" class="btn btn-tertiary btn-icon btn-icon-sliders">Tertiary Button</a>
Text Button
<a href="#" class="btn btn-text">Text Button <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
<a href="#" class="btn btn-text btn-icon btn-animate">Text Button</a>

Test background colors