Brand Hero

Use to set a context for the page and land the brand proposition clearly.

Description

This component contains brand heading, copy text and CTAs following the same layout as the functional hero, the only difference being the usage of the Selfmade Sans font.

Usage

Usage example

Working capital loans

Working capital loans can give you the breathing space to make sensible management decisions and grow your business.

Kostenloses Anlegerkonto eröffnen orApply now
Hero caption - description goes here

Code example

<section class="hero">
  <div class="hero__inner">
    <div class="hero__content u-color-white">
      <section class="text-block text-block--large u-mb-small">
        <h3 class="brand-heading brand-heading--hero u-color-white text-block__heading-bar--brand">Working capital loans</h3>
        <p class="text-block__lead-paragraph">Working capital loans can give you the breathing space to make sensible management decisions and grow your business.</p>
      </section>
      <section class="cta-combo">
        <a class="cta-primary cta-combo__primary" href="#">Kostenloses Anlegerkonto eröffnen</a>
        <span class="cta-combo__secondary-wrap">or<a class="cta-link cta-combo__secondary" href="#">Apply now</a>
        </span>
      </section>

      <span class="hero__caption u-color-white">Hero caption - description goes here</span>
    </div>
  </div>
</section>