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 index f4b099e2e..d109542ac 100644 --- 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 index 235f3696c..1bec8404f 100644 --- 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 @@

Dies ist eine Headline

+
+
+

Was unsere Kunden sagen

+

{{workshop_text}}

+
+
+
+

"{{intro_text}}"

+ +
+
+

"{{intro_text}}"

+ +
+
+

"{{text_short}}"

+ +
+
+

Unsere Workshops

diff --git a/components/04-molecules/text-card/_text-card.scss b/components/04-molecules/text-card/_text-card.scss new file mode 100644 index 000000000..0ec8a7417 --- /dev/null +++ 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 new file mode 100644 index 000000000..6f8314359 --- /dev/null +++ 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 new file mode 100644 index 000000000..a607ac91c --- /dev/null +++ b/components/04-molecules/text-card/text-card.html @@ -0,0 +1,23 @@ +
+
+

"{{text_short}}"

+ +
+
+

"{{text_longer}}"

+ +
+
+

"{{text_short}}"

+ +
+
diff --git a/lib/styles/index.scss b/lib/styles/index.scss index cf67a35a8..c8a7c975f 100644 --- 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';