Text Card 

<div class="card-grid">
    <div class="text-card">
        <p class="text-card__quote">"Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr."</p>
        <div class="text-card__footer">
            <h3 class="text-card__name">Alisa Zett</h3>
            <p class="text-card__job">Head of IT, Mustercompany</p>
        </div>
    </div>
    <div class="text-card">
        <p class="text-card__quote">"Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, no sea takimata sanctus est Lorem ipsum dolor sit amet."</p>
        <div class="text-card__footer">
            <h3 class="text-card__name">Alisa Zett</h3>
            <p class="text-card__job">Head of Marketing and IT, Mustercompany</p>
        </div>
    </div>
    <div class="text-card">
        <p class="text-card__quote">"Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr."</p>
        <div class="text-card__footer">
            <h3 class="text-card__name">Alisa Zett</h3>
            <p class="text-card__job">Head of IT, Mustercompany</p>
        </div>
    </div>
</div>
 
<div class="card-grid">
    <div class="text-card">
        <p class="text-card__quote">"{{text_short}}"</p>
        <div class="text-card__footer">
            <h3 class="text-card__name">Alisa Zett</h3>
            <p class="text-card__job">Head of IT, Mustercompany</p>
        </div>
    </div>
    <div class="text-card">
        <p class="text-card__quote">"{{text_longer}}"</p>
        <div class="text-card__footer">
            <h3 class="text-card__name">Alisa Zett</h3>
            <p class="text-card__job">Head of Marketing and IT, Mustercompany</p>
        </div>
    </div>
    <div class="text-card">
        <p class="text-card__quote">"{{text_short}}"</p>
        <div class="text-card__footer">
            <h3 class="text-card__name">Alisa Zett</h3>
            <p class="text-card__job">Head of IT, Mustercompany</p>
        </div>
    </div>
</div>
 
{
  "text_short": "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
  "text_longer": "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, no sea takimata sanctus est Lorem ipsum dolor sit amet."
}
  • Content: 
    .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
  column-gap: $spacer-md;
}

.text-card {
  @extend %hover-glow;

  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;

  margin-bottom: $spacer-md;

  background: $gradient-2;

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

    padding: $spacer-lg $spacer-md $spacer-md;
    font-size: $font-size-md;
    color: $brand-secondary;
  }

  &__footer {
    display: flex;
    flex-direction: column;
    padding: $spacer-md;
  }

  &__name {
    @extend %heading-font-bold;

    font-size: $font-size-sm;
    color: $brand-primary;
  }

  &__job {
    @extend %body-font-sans;

    padding-top: $spacer-xs;
    color: $brand-primary;
  }
}

@media screen and (min-width: $grid-breakpoint-md) {
  .text-card__name {
    font-size: $font-size-md;
  }

  .text-card__job {
    padding-top: $spacer-sm;
  }

  .text-card__quote {
    font-size: $font-size-lg;
  }
}
  • URL: /components/raw/text-card/_text-card.scss
  • Filesystem Path: components/04-molecules/text-card/_text-card.scss
  • Size: 976 Bytes

No notes defined.