Customer quotes (#381)

* Add customer quote section * Finish cards * Remove images from quote * Fix spacing * Extract component text card and clean up --------- Co-authored-by: Sonja Scheungrab <[email protected]>
innoq · Apr 24, 2024 · 270f502 · 270f502
1 parent d63ddb0
commit 270f502
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 0 deletions.
diff --git a/components/01-pages/service-pages/legacy-modernization-page/_legacy-modernization-page.scss b/components/01-pages/service-pages/legacy-modernization-page/_legacy-modernization-page.scss
@@ -3,6 +3,10 @@
 
  p {
  @extend %body-font-sans;
+
+ &.text-card__quote {
+ @extend %body-font-italic;
+ }
  }
 
  .longquote__zigzag {

diff --git a/components/01-pages/service-pages/legacy-modernization-page/legacy-modernization-page.html b/components/01-pages/service-pages/legacy-modernization-page/legacy-modernization-page.html
@@ -220,6 +220,35 @@ <h2 class="case-tile-teaser__headline">Dies ist eine Headline</h2>
  </div>
  </section>
  <div class="stripe stripe--gray">
+ <section class="container-xl container-vertical-spacing-lg">
+ <div class="page-layout-md--default">
+ <h2>Was unsere Kunden sagen</h2>
+ <p>{{workshop_text}}</p>
+ </div>
+ <div class="card-grid">
+ <div class="text-card">
+ <p class="text-card__quote">"{{intro_text}}"</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">"{{intro_text}}"</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>
+ </section>
  <section class="container-xl container-vertical-spacing-lg">
  <div class="page-layout-md--default">
  <h2>Unsere Workshops</h2>

diff --git a/components/04-molecules/text-card/_text-card.scss b/components/04-molecules/text-card/_text-card.scss
@@ -0,0 +1,59 @@
+.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;
+ }
+}
diff --git a/components/04-molecules/text-card/text-card.config.yml b/components/04-molecules/text-card/text-card.config.yml
@@ -0,0 +1,9 @@
+status: ready
+context:
+ 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.
+
diff --git a/components/04-molecules/text-card/text-card.html b/components/04-molecules/text-card/text-card.html
@@ -0,0 +1,23 @@
+<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>
diff --git a/lib/styles/index.scss b/lib/styles/index.scss
@@ -135,6 +135,7 @@
 @import '../components/04-molecules/teaser/tile-teaser/static-tile-teaser/static-tile-teaser';
 @import '../components/04-molecules/toolbar/toolbar';
 @import '../components/04-molecules/textbox-sequence/textbox-sequence';
+@import '../components/04-molecules/text-card/text-card';
 @import '../components/04-molecules/video-card/video-card';
 @import '../components/04-molecules/visual-divider/image-divider-center/image-divider-center';
 @import '../components/04-molecules/visual-divider/image-divider-right/image-divider-right';