Cta Sidebar 

<aside class="cta-sidebar">
    <h2 class="cta-sidebar__heading">Primer Blockchain</h2>
    <p class="cta-sidebar__text">Lade Dir hier unseren kostenlosen Primer zum Thema Blockchain herunter!</p>
    <img class="cta-sidebar__image" src="../../assets/example-content/blockchain-primer.jpg" alt="" />
    <a class="cta-sidebar__btn btn btn--cta btn--xsmall" data-label="Download" href="#" aria-label="Download Blockchain Primer">Download</a>
</aside>
 
<aside class="cta-sidebar">
  <h2 class="cta-sidebar__heading">Primer Blockchain</h2>
  <p class="cta-sidebar__text">Lade Dir hier unseren kostenlosen Primer zum Thema Blockchain herunter!</p>
  <img class="cta-sidebar__image" src="{{path '/assets/example-content/blockchain-primer.jpg'}}" alt="" />
  <a class="cta-sidebar__btn btn btn--cta btn--xsmall" data-label="Download" href="#"
     aria-label="Download Blockchain Primer">Download</a>
</aside>
 
/* No context defined. */
  • Content: 
    .cta-sidebar {
  display: flex;
  flex-direction: column;
  align-items: start;
  color: $cta-sidebar-heading-color;

  &__heading {
    @extend %heading-font-heavy;

    margin-bottom: $spacer-sm;
    font-size: $font-size-sm;
    text-transform: uppercase;
  }

  &__text {
    @extend %body-font-italic;

    font-size: $font-size-base;
  }

  &__image {
    width: 100%;
    height: auto;
    margin-top: $spacer-xs;
  }

  &__btn {
    align-self: center;
    margin-top: $spacer-xs;
    text-align: center;
  }

  @media screen and (min-width: $grid-breakpoint-lg-xl) {
    margin-top: $spacer-xxs;
    margin-right: $spacer-xl;
  }
}
  • URL: /components/raw/cta-sidebar/_cta-sidebar.scss
  • Filesystem Path: components/04-molecules/cta-sidebar/_cta-sidebar.scss
  • Size: 641 Bytes

No notes defined.