Die Höhe von Bewertungskarten wird automatisch angeglichen, sobald diese in einem Grid gruppiert sind. Siehe zweites Beispiel.
.evaluation-card {
$this: &;
background-color: #fff;
box-shadow: 0 2px 5px rgba(#000, .3);
display: flex;
flex-direction: column;
gap: $spacer * .75;
min-height: 240px;
padding: ($spacer * 1.25) ($spacer * .75) ($spacer * .5) ($spacer * .75);
position: relative;
transition: transform .15s ease-in-out;
&:hover {
transform: scale(1.02);
}
// Force same height if in a grid
@at-root .row > * > #{$this} {
min-height: 100%;
}
#{$this}__category {
align-self: end;
background-color: $primary;
color: #fff;
font-size: $font-size-xs;
line-height: 1;
margin-right: -($spacer * .75);
margin-top: -($spacer * 1.25);
padding: $spacer * .5;
position: relative;
}
#{$this}__header {
font-size: $font-size-base;
margin: 0;
a::after {
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
}
#{$this}__body {
display: -webkit-box;
-webkit-line-clamp: 7;
overflow: hidden;
-webkit-box-orient: vertical;
> *:last-child {
margin-bottom: 0;
}
ul {
padding-left: $spacer;
margin: 0;
}
}
#{$this}__evaluation {
align-items: flex-end;
color: #fff;
display: flex;
justify-content: space-between;
margin-left: -$spacer * .75;
margin-right: -$spacer * .75;
margin-top: auto;
padding: $spacer * .75;
}
@each $color, $value in $theme-colors {
#{$this}__evaluation--#{$color} {
background-color: $value;
}
}
#{$this}__score {
font-weight: 500;
// Keeps the evaluation block at height when threshold is missing.
&::before {
content: '\00a0';
display: block;
font-size: $font-size-xs;
}
}
#{$this}__threshold {
font-size: $font-size-xs;
text-align: right;
}
#{$this}__threshold-value {
display: block;
font-size: $font-size-base;
}
#{$this}__footer {
font-size: $font-size-xs;
min-height: 2lh;
}
}
.evaluation-card--cta {
.evaluation-card__body {
-webkit-line-clamp: initial; // 'None' still basically no support.
padding-bottom: $spacer;
padding-top: $spacer;
}
}
<div class="evaluation-card">
<span class="evaluation-card__category">
Kategorie
</span>
<h1 class="evaluation-card__header">
<a href="#">Optimierte Wasseraufbereitung</a>
</h1>
<div class="evaluation-card__body">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="evaluation-card__evaluation evaluation-card__evaluation--material">
<span class="evaluation-card__score">
Bewertung:
<span class="evaluation-card__score-value">5</span>
</span>
<span class="evaluation-card__threshold">
Schwellenwert
<span class="evaluation-card__threshold-value">3</span>
</span>
</div>
<div class="evaluation-card__footer">
Thorsten Meier-Wegener, 02.04.2025, 19:45 Uhr
</div>
</div>
<div class="row g-4">
<div class="col-md-3">
<div class="evaluation-card">
<span class="evaluation-card__category">
Kategorie
</span>
<h1 class="evaluation-card__header">
<a href="#">Optimierte Wasseraufbereitung</a>
</h1>
<div class="evaluation-card__body">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="evaluation-card__evaluation evaluation-card__evaluation--material">
<span class="evaluation-card__score">
Bewertung:
<span class="evaluation-card__score-value">5</span>
</span>
<span class="evaluation-card__threshold">
Schwellenwert
<span class="evaluation-card__threshold-value">3</span>
</span>
</div>
<div class="evaluation-card__footer">
Thorsten Meier-Wegener, 02.04.2025, 19:45 Uhr
</div>
</div>
</div>
<div class="col-md-3">
<div class="evaluation-card">
<span class="evaluation-card__category">
Kategorie
</span>
<h1 class="evaluation-card__header">
<a href="#">Optimierte Wasseraufbereitung</a>
</h1>
<div class="evaluation-card__body">
Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.
</div>
<div class="evaluation-card__evaluation evaluation-card__evaluation--not-material">
<span class="evaluation-card__score">
Bewertung:
<span class="evaluation-card__score-value">5</span>
</span>
<span class="evaluation-card__threshold">
Schwellenwert
<span class="evaluation-card__threshold-value">3</span>
</span>
</div>
<div class="evaluation-card__footer">
Thorsten Meier-Wegener, 02.04.2025, 19:45 Uhr
</div>
</div>
</div>
<div class="col-md-3">
<div class="evaluation-card">
<span class="evaluation-card__category">
Kategorie
</span>
<h1 class="evaluation-card__header">
<a href="#">Optimierte Wasseraufbereitung</a>
</h1>
<div class="evaluation-card__body">
Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="evaluation-card__evaluation evaluation-card__evaluation--gray">
<span class="evaluation-card__score">
Bewertung:
<span class="evaluation-card__score-value">5</span>
</span>
<span class="evaluation-card__threshold">
Schwellenwert
<span class="evaluation-card__threshold-value">3</span>
</span>
</div>
<div class="evaluation-card__footer">
Thorsten Hat Eine Menge Vornamen Meier-Wegener, 02.04.2025, 19:45 Uhr
</div>
</div>
</div>
<div class="col-md-3">
<div class="evaluation-card">
<span class="evaluation-card__category">
Kategorie
</span>
<h1 class="evaluation-card__header">
<a href="#">Optimierte Wasseraufbereitung</a>
</h1>
<div class="evaluation-card__body">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
<div class="evaluation-card__evaluation evaluation-card__evaluation--danger">
<span class="evaluation-card__score">
Bewertung:
<span class="evaluation-card__score-value">offen</span>
</span>
</div>
<div class="evaluation-card__footer">
Thorsten Meier-Wegener, 02.04.2025, 19:45 Uhr
</div>
</div>
</div>
</div>