Cta Inline 

<aside class="cta-inline">
    <div class="cta-inline__body">
        <h2 class="cta-inline__heading">Primer Blockchain</h2>
        <p class="cta-inline__text">Lade Dir hier unseren kostenlosen Primer zum Thema Blockchain herunter!</p>
        <a class="btn btn--cta btn--xsmall" href="#" aria-label="Download Blockchain Primer">Download</a>
    </div>
    <img class="cta-inline__image" src="../../assets/example-content/blockchain-primer.jpg" alt="" />
</aside>
 
<aside class="cta-inline">
    <div class="cta-inline__body">
        <h2 class="cta-inline__heading">Primer Blockchain</h2>
        <p class="cta-inline__text">Lade Dir hier unseren kostenlosen Primer zum Thema Blockchain herunter!</p>
        <a class="btn btn--cta btn--xsmall" href="#" aria-label="Download Blockchain Primer">Download</a>
    </div>
    <img class="cta-inline__image" src="{{ path '/assets/example-content/blockchain-primer.jpg' }}" alt="" />
</aside>
 
/* No context defined. */
  • Content: 
    .cta-inline {
  display: flex;
  align-items: center;
  gap: $spacer-md;
  background-color: $brand-primary-25;
  border-left: 4px solid $brand-primary;
  padding: $spacer-md $spacer-base;
  margin-top: $spacer-base;
  margin-bottom: $spacer-base;

  &__body {
    flex: 1;
  }

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

    margin-bottom: $spacer-xs;
    font-size: $font-size-sm;
    text-transform: uppercase;
    color: $cta-sidebar-heading-color;
  }

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

    font-size: $font-size-base;
    margin-bottom: $spacer-sm;
  }

  &__image {
    flex-shrink: 0;
    width: 12rem;
    align-self: stretch;
    object-fit: contain;

    @media screen and (max-width: $grid-breakpoint-sm) {
      display: none;
    }
  }
}
  • URL: /components/raw/cta-inline/_cta-inline.scss
  • Filesystem Path: components/04-molecules/cta-inline/_cta-inline.scss
  • Size: 768 Bytes

No notes defined.