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));
  gap: $spacer-lg;
}

.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;
  }
}

// Modifier to override quote font style if needed
.text-card--regular-quote {
  .text-card__quote {
    font-style: normal;
  }
}

@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: 1.1 KB

No notes defined.