Functional Hero

Use to set context for the page through a headline introducing the content.

Description

This component contains section heading, copy text and CTAs following the same layout as the brand hero, the only difference being the usage of the Amasis font for the heading.

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

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="text-block__heading-bar--primary section-heading section-heading--large u-color-white">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>
    </div>
  </div>
</section>