styleguide

Farben

#0063af
bg-color__accent
#f3f3f3
bg-color__1
#e4c3a0
bg-color__2
#3e5881
bg-color__3
#97a77a
bg-color__4

Typographie

Headers

  • <h1>Header 1</h1>
  • <h2>Header 2</h2>
  • <h3>Header 3</h3>
  • <a href="#" target="_blank">Hyperlink</a>

Paragraphs

<p>Paragraph</p>

  1. font-family: 'Roboto',sans-serif;
  2. font-weight: 400
  3. font-size: .9rem
  4. color: #303030

Paragraph

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Buttons

button default
<a class="button button-default" href="#">button default</a>
            

2 Text Kolumne

KREBS KENNT KEINEN
ALTERSUNTERSCHIED

Jedes Jahr erkranken rund 2.200 Kinder und Jugendliche neu an Krebs. Von einem Tag auf den anderen ändert sich der Alltag der jungen Patienten und ihrer Familien vollständig. Untersuchungen,Therapien und Ängste bestimmen nun ihr Leben. Und auch ihre Eltern und Geschwister leiden mit. In dieser schweren Zeit brauchen betroffene Familien unsere Hilfe und Solidarität. Die Deutsche Krebshilfe und ihre Tochterorganisation, die Stiftung Deutsche KinderKrebshilfe, setzen sich für krebskranke Kinder und Jugendliche ein.

VERANTWORTUNG
FÜR DAS LEBEN

Krebs hat viele Gesichter. Das zeigen die zahlreichen Erfahrungen, über die uns Betroffene und ihre Familien täglich berichten. Dank der enormen Fortschritte in der Krebsforschung und -medizin kann inzwischen jeder zweite Patient erfolgreich behandelt werden. Hierzu hat die Deutsche Krebshilfe maßgebliche Beiträge geleistet. Aber für viele Erkrankte gibt es immer noch keine Chance auf Heilung. Bis heute konnte die Deutsche Krebshilfe durch die große Spendenbereitschaft der Bevölkerung mehr als 5.000 Projekte und Initiativen auf den Gebieten der Krebsprävention, -früherkennung, -diagnostik,-behandlung, -nachsorge sowie der Krebsforschung fördern.

<div class="bs-container">
   <div class="row">
      <div class="col-12 col-md-6 mb-3 mb-md-0">
         <h3 class="text-color-accent mb-3">KREBS KENNT KEINEN<br>
            ALTERSUNTERSCHIED
         </h3>
         <p>Jedes Jahr erkranken rund 2.200 Kinder und Jugendliche neu an Krebs. Von einem Tag auf den anderen ändert sich der Alltag der jungen Patienten und ihrer Familien vollständig. Untersuchungen,Therapien und Ängste bestimmen nun ihr Leben. Und auch ihre Eltern und Geschwister leiden mit. In dieser schweren Zeit brauchen betroffene Familien unsere Hilfe und Solidarität. Die Deutsche Krebshilfe und ihre Tochterorganisation, die Stiftung Deutsche KinderKrebshilfe, setzen sich für krebskranke Kinder und Jugendliche ein.</p>
      </div>
      <div class="col-12 col-md-6">
         <h3 class="text-color-accent mb-3">VERANTWORTUNG<br>
            FÜR DAS LEBEN
         </h3>
         <p>Krebs hat viele Gesichter. Das zeigen die zahlreichen Erfahrungen, über die uns Betroffene und ihre Familien täglich berichten. Dank der enormen Fortschritte in der Krebsforschung und -medizin kann inzwischen jeder zweite Patient erfolgreich behandelt werden. Hierzu hat die Deutsche Krebshilfe maßgebliche Beiträge geleistet. Aber für viele Erkrankte gibt es immer noch keine Chance auf Heilung. Bis heute konnte die Deutsche Krebshilfe durch die große Spendenbereitschaft der Bevölkerung mehr als 5.000 Projekte und Initiativen auf den Gebieten der Krebsprävention, -früherkennung, -diagnostik,-behandlung, -nachsorge sowie der Krebsforschung fördern.</p>
      </div>
   </div>
</div>
</section>
            

3 Text Kolumne

KREBS KENNT KEINEN
ALTERSUNTERSCHIED

Jedes Jahr erkranken rund 2.200 Kinder und Jugendliche neu an Krebs. Von einem Tag auf den anderen ändert sich der Alltag der jungen Patienten und ihrer Familien vollständig. Untersuchungen,Therapien und Ängste bestimmen nun ihr Leben. Und auch ihre Eltern und Geschwister leiden mit. In dieser schweren Zeit brauchen betroffene Familien unsere Hilfe und Solidarität. Die Deutsche Krebshilfe und ihre Tochterorganisation, die Stiftung Deutsche KinderKrebshilfe, setzen sich für krebskranke Kinder und Jugendliche ein.

KREBS KENNT KEINEN
ALTERSUNTERSCHIED

Jedes Jahr erkranken rund 2.200 Kinder und Jugendliche neu an Krebs. Von einem Tag auf den anderen ändert sich der Alltag der jungen Patienten und ihrer Familien vollständig. Untersuchungen,Therapien und Ängste bestimmen nun ihr Leben. Und auch ihre Eltern und Geschwister leiden mit. In dieser schweren Zeit brauchen betroffene Familien unsere Hilfe und Solidarität. Die Deutsche Krebshilfe und ihre Tochterorganisation, die Stiftung Deutsche KinderKrebshilfe, setzen sich für krebskranke Kinder und Jugendliche ein.

VERANTWORTUNG
FÜR DAS LEBEN

Krebs hat viele Gesichter. Das zeigen die zahlreichen Erfahrungen, über die uns Betroffene und ihre Familien täglich berichten. Dank der enormen Fortschritte in der Krebsforschung und -medizin kann inzwischen jeder zweite Patient erfolgreich behandelt werden. Hierzu hat die Deutsche Krebshilfe maßgebliche Beiträge geleistet. Aber für viele Erkrankte gibt es immer noch keine Chance auf Heilung. Bis heute konnte die Deutsche Krebshilfe durch die große Spendenbereitschaft der Bevölkerung mehr als 5.000 Projekte und Initiativen auf den Gebieten der Krebsprävention, -früherkennung, -diagnostik,-behandlung, -nachsorge sowie der Krebsforschung fördern.

<section aria-label="text-content" class="mb-4 mb-md-5">
   <div class="bs-container">
      <div class="row">
         <div class="col-12 col-md-4 mb-3 mb-md-0">
            <h3 class="text-color-accent mb-3">KREBS KENNT KEINEN<br>
               ALTERSUNTERSCHIED
            </h3>
            <p>Jedes Jahr erkranken rund 2.200 Kinder und Jugendliche neu an Krebs. Von einem Tag auf den anderen ändert sich der Alltag der jungen Patienten und ihrer Familien vollständig. Untersuchungen,Therapien und Ängste bestimmen nun ihr Leben. Und auch ihre Eltern und Geschwister leiden mit. In dieser schweren Zeit brauchen betroffene Familien unsere Hilfe und Solidarität. Die Deutsche Krebshilfe und ihre Tochterorganisation, die Stiftung Deutsche KinderKrebshilfe, setzen sich für krebskranke Kinder und Jugendliche ein.</p>
         </div>
         <div class="col-12 col-md-4 mb-3 mb-md-0">
            <h3 class="text-color-accent mb-3">KREBS KENNT KEINEN<br>
               ALTERSUNTERSCHIED
            </h3>
            <p>Jedes Jahr erkranken rund 2.200 Kinder und Jugendliche neu an Krebs. Von einem Tag auf den anderen ändert sich der Alltag der jungen Patienten und ihrer Familien vollständig. Untersuchungen,Therapien und Ängste bestimmen nun ihr Leben. Und auch ihre Eltern und Geschwister leiden mit. In dieser schweren Zeit brauchen betroffene Familien unsere Hilfe und Solidarität. Die Deutsche Krebshilfe und ihre Tochterorganisation, die Stiftung Deutsche KinderKrebshilfe, setzen sich für krebskranke Kinder und Jugendliche ein.</p>
         </div>
         <div class="col-12 col-md-4">
            <h3 class="text-color-accent mb-3">VERANTWORTUNG<br>
               FÜR DAS LEBEN
            </h3>
            <p>Krebs hat viele Gesichter. Das zeigen die zahlreichen Erfahrungen, über die uns Betroffene und ihre Familien täglich berichten. Dank der enormen Fortschritte in der Krebsforschung und -medizin kann inzwischen jeder zweite Patient erfolgreich behandelt werden. Hierzu hat die Deutsche Krebshilfe maßgebliche Beiträge geleistet. Aber für viele Erkrankte gibt es immer noch keine Chance auf Heilung. Bis heute konnte die Deutsche Krebshilfe durch die große Spendenbereitschaft der Bevölkerung mehr als 5.000 Projekte und Initiativen auf den Gebieten der Krebsprävention, -früherkennung, -diagnostik,-behandlung, -nachsorge sowie der Krebsforschung fördern.</p>
         </div>
      </div>
   </div>
</section>
            

Bild mit Text rechts

H3 header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis pretium.

<div class="bs-container bg-color__1 p-3 p-md-4 mb-4 mb-md-5">
   <div class="row">
      <div class="col-12 col-md-6"><a class="bs-card" href="#"><img alt="" class="card-img zoom-10" loading="lazy" src="/media/13304-kc-media/weihnachtsfeier.png" /></a></div>
      <div class="col-12 col-md-6 p-3 p-md-4">
         <h3>H3 header</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis pretium.</p>
         <div class="text-center">
            <a class="button button-default mt-3 mt-md-4" href="#">button default</a>
         </div>
      </div>
   </div>
</div>

Bild mit Text links

H3 header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis pretium.

<div class="bs-container bg-color__1 p-3 p-md-4 mb-4 mb-md-5">
   <div class="row">
      <div class="col-12 col-md-6 p-3 p-md-4">
         <h3>H3 header</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa. Sed dignissim lorem sed nunc scelerisque placerat. In ullamcorper id mauris vel congue. Quisque rutrum justo neque, a aliquet quam laoreet sed. Nam sed consequat magna. Donec sodales ipsum et sagittis pretium.</p>
         <div class="text-center"><a class="button button-default mt-3 mt-md-4" href="#">button default</a></div>
      </div>
      <div class="col-12 col-md-6"><a class="bs-card" href="#"><img class="card-img zoom-10" loading="lazy" src="/media/13304-kc-media/weihnachtsfeier.png" /></a></div>
   </div>
</div>
            

3 Text Kolumne gleiche Höhe

Header h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa.

Header h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus.

Header h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa.

<div class="bs-container mb-4 mb-md-5">
   <div class="row">
      <div class="col-12 col-md-4 mb-4 mb-md-0">
         <div class="bs-card">
            <a class="overflow-hidden mb-2" href="#"><img class="card-img zoom-10" loading="lazy" src="/media/13304-kc-media/weihnachtsfeier.png" /> </a>
            <div class="card-content mb-3">
               <h4 class="text-center">Header h4</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa.</p>
            </div>
            <div class="card-button-group text-center"><a class="button button-default" href="#">button</a></div>
         </div>
      </div>
      <div class="col-12 col-md-4 mb-4 mb-md-0">
         <div class="bs-card">
            <a class="overflow-hidden mb-2" href="#"><img class="card-img zoom-10" loading="lazy" src="/media/13304-kc-media/weihnachtsfeier.png" /> </a>
            <div class="card-content mb-3">
               <h4 class="text-center">Header h4</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus.</p>
            </div>
            <div class="card-button-group text-center"><a class="button button-default" href="#">button</a></div>
         </div>
      </div>
      <div class="col-12 col-md-4 mb-4 mb-md-0">
         <div class="bs-card">
            <a class="overflow-hidden mb-2" href="#"><img class="card-img zoom-10" loading="lazy" src="/media/13304-kc-media/weihnachtsfeier.png" /> </a>
            <div class="card-content mb-3">
               <h4 class="text-center">Header h4</h4>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a efficitur velit. Aenean iaculis auctor urna. Pellentesque cursus sem non tempor dapibus. Duis diam orci, tempor non venenatis a, ultrices et massa.</p>
            </div>
            <div class="card-button-group text-center"><a class="button button-default" href="#">button</a></div>
         </div>
      </div>
   </div>
</div>
            

2 Bilder mit button

<div class="bs-container mb-4 mb-md-5">
   <div class="row gx-3">
      <div class="col-6"><a class="bs-card" href="#"><img class="card-img zoom-10" height="418" loading="lazy" src="/media/13304-kc-media/firmenfeier.jpg" width="447"><span class="card-label">BETRIEBSFEIER</span> </a></div>
      <div class="col-6"><a class="bs-card" href="#"><img class="card-img zoom-10" height="418" loading="lazy" src="/media/13304-kc-media/weihnachtsfeier.png" width="447"><span class="card-label">WEIHNACHTSFEIER</span> </a></div>
   </div>
</div>

3 Bilder met button

Entdecken Sie Weitere Kategorien

<div class="bs-container mb-4 mb-md-5">
   <h2 class="mb-3">Entdecken Sie Weitere Kategorien</h2>
   <div class="row row-cols-2 row-cols-md-3 gx-3">
      <div class="col mb-3 mb-lg-0"><a class="bs-card" href="#"><img class="card-img zoom-10" height="418" loading="lazy" src="/media/13304-kc-media/firmenfeier.jpg" width="447"><span class="card-label">BETRIEBSFEIER</span> </a></div>
      <div class="col mb-3 mb-lg-0"><a class="bs-card" href="#"><img class="card-img zoom-10" height="418" loading="lazy" src="/media/13304-kc-media/weihnachtsfeier.png" width="447"><span class="card-label">WEIHNACHTSFEIER</span> </a></div>
      <div class="col mb-3 mb-lg-0"><a class="bs-card" href="#"><img class="card-img zoom-10" height="418" loading="lazy" src="/media/13304-kc-media/geburtstag.png" width="447"> <span class="card-label">GEBURTSTAG</span> </a></div>
   </div>
</div>

4 Bilder met button

<div class="bs-container mb-4 mb-md-5">
   <h2 class="mb-3">Entdecken Sie Weitere Kategorien</h2>
   <div class="row row-cols-2 row-cols-md-4  gx-3">
      <div class="col mb-3 mb-lg-0"><a class="bs-card" href="#"><img class="card-img zoom-10" height="418" loading="lazy" src="/media/13304-kc-media/firmenfeier.jpg" width="447"><span class="card-label">BETRIEBSFEIER</span> </a></div>
      <div class="col mb-3 mb-lg-0"><a class="bs-card" href="#"><img class="card-img zoom-10" height="418" loading="lazy" src="/media/13304-kc-media/weihnachtsfeier.png" width="447"><span class="card-label">WEIHNACHTSFEIER</span> </a></div>
      <div class="col mb-3 mb-lg-0"><a class="bs-card" href="#"><img class="card-img zoom-10" height="418" loading="lazy" src="/media/13304-kc-media/geburtstag.png" width="447"> <span class="card-label">GEBURTSTAG</span> </a></div>
      <div class="col mb-3 mb-lg-0"><a class="bs-card" href="#"><img class="card-img zoom-10" height="418" loading="lazy" src="/media/13304-kc-media/jubilaeum.jpg" width="447"> <span class="card-label">JUBILÄUM</span> </a></div>
   </div>
</div>