Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Customer quotes #381

Merged
merged 5 commits into from
Apr 24, 2024
Merged

Customer quotes #381

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5fe32bb
Add customer quote section
Apr 9, 2024
85506dd
Finish cards
Apr 11, 2024
9b9a5fd
Remove images from quote
Apr 24, 2024
3734846
Fix spacing
Apr 24, 2024
6e7f2bf
Extract component text card and clean up
Apr 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions components/01-pages/service-pages/legacy-modernization-page/_legacy-modernization-page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@

p {
@extend %body-font-sans;

&.text-card__quote {
@extend %body-font-italic;
}
}

.longquote__zigzag {
Expand Down
29 changes: 29 additions & 0 deletions components/01-pages/service-pages/legacy-modernization-page/legacy-modernization-page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
59 changes: 59 additions & 0 deletions components/04-molecules/text-card/_text-card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
9 changes: 9 additions & 0 deletions components/04-molecules/text-card/text-card.config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.

23 changes: 23 additions & 0 deletions components/04-molecules/text-card/text-card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
1 change: 1 addition & 0 deletions lib/styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
Loading