Pro Abo

The component is an advertisement for the f.net PRO abonnement. It will show under a f.net PRO teaser text and overlaps part of the text.

The following code shows how to use pro abo:

<div class="pro-abo flyout flyout--size-2" action="#" method="get">
  <div class="pro-abo__logo">
    <span class="logo logo--pro-light"></span>
  </div>
  <div class="pro-abo__close">
    <span class="icon icon--close font-color-white font-size-x1.250 pointer" tabindex="1"></span>
  </div>
  <div class="pro-abo__head font-align-center">
    <p class="headline headline--h4 font-color-white">finanzen.net PRO Jahresabo</p>
    <p class="font-size-x1.125 font-weight-bold font-color-white">Ihre Vorteile im Überplick:</p>
  </div>
  <div class="pro-abo__advantages">
    <ul class="list font-color-gray-200">
      <li class="list__success list--circle list--pro">Freier Zugang: Uneingeschränkter Zugriff auf ALLE finanzen.net PRO-Inhalte wie Analysen, Ranglisten und Strategien</li>
      <li class="list__success list--circle list--pro">Lesen Sie vor allen anderen exklusive News und Reports aus der Finanzwelt</li>
      <li class="list__success list--circle list--pro">Treffen Sie mithilfe unserer Finanzexperten die richtigen finanziellen Entscheidungen</li>
    </ul>
  </div>
  <form class="pro-abo__form">
    <div class="radio" tabindex="1">
      <input class="radio__input" type="radio" value="annual" id="annual-subscription" name="pro-abo-subscription" checked>
      <label class="radio__label font-color-white" for="annual-subscription">Jahresabo</label>
    </div>
    <div class="radio" tabindex="1">
      <input class="radio__input" type="radio" value="monthly" id="monthly-subscription" name="pro-abo-subscription">
      <label class="radio__label font-color-white" for="monthly-subscription">Monatsabo</label>
    </div>
    <input type="submit" class="button button--pro-primary button--stretch button--scale-x1.500 button--scale-x1.000-xs button--stretch" value="Jetzt abonnieren" tabindex="1">
  </form>
  <div class="pro-abo__footer font-align-center">
    <p class="font-color-white">Sie besitzen bereits finanzen.net PRO? <a href="#" class="font-color-white">Jetzt anmelden</a></p>
  </div>
</div>

You can en-/disable the overlapping effect by adding or removing the .pro-abo--flyout block modifier.

You also can remove the radios from the code. The .pro-abo__form part will change to:

<div class="pro-abo pro-abo--flyout">
  <!-- ... -->
  <div class="pro-abo__form">
    <a href="#" class="button button--pro-primary button--stretch button--scale-x1.500 button--stretch" tabindex="1">Jetzt abonnieren</a>
  </div>
  <!-- ... -->
</div>

Example:

Theme de [FIX] Screen size XL

html