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 @@
+
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';