<article class="card has-overlay-link" data-card-type="list">
<div class="card__inner">
<div class="card__image">
<picture class="image image--cover">
<img class="image__img" src="/assets/images/card-placeholder-image.6a8af03ab4.svg" width="800" height="450" alt="" loading="lazy" role="presentation" />
</picture>
</div>
<div class="card__content">
<div class="card__head">
<div class="card__headline u-line-clamp">
<h3 class="headline headline--3"><a href="#" class="headline__link u-overlay-link"><span class="headline__kicker">Optionaler Kicker<span class="u-hidden-visually">: </span></span><span class="headline__text u-underline">Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst</span></a></h3>
</div>
</div>
<div class="card__description">Um die regionale, hausärztliche Versorgung perspektivisch und nachhaltig sicherzustellen, bietet der Landkreis Hof ein Stipendium für Medizinstudierende an. Das Stipendium wird frühestens ab Beginn des Wintersemesters eines…</div>
</div>
</div>
</article>
{% set color = color ?? null %}
{% set showDetailLabels = showDetailLabels ?? false %}
{% set useFallbackImage = useFallbackImage ?? true %}
{% set level = level ??? 3 %}
{% set link = link ?? null %}
{% set linkType = linkType ??? link_type(link) %}
{% set icon = icon ?? link_icon(link=link, type=linkType, always=true) %}
{% set headlineTag = headlineTag ??? "h#{level}" -%}
<article {{ html_attributes({
id: id ?? false,
class: ['card', 'has-overlay-link'],
'data-card-color': color,
'data-card-type': type ?? 'list',
}) }}>
<div class="card__inner">
{% if more|default or image|default or logo|default or useFallbackImage or context|default %}
<div class="card__image">
{% if more|default %}
{% include '@image' with {
src: asset('images/card-more.svg'),
width: 800,
height: 450,
decorative: true,
cover: true,
} only %}
{% elseif image|default %}
{% include '@image' with image | merge({
cover: true,
}) only %}
{% if logo|default %}
<img {{ html_attributes({
src: logo.src,
srcset: logo.srcset ?? false,
width: logo.width ?? false,
height: logo.height ?? false,
class: 'card__overlay-logo',
loading: 'lazy',
role: 'presentation',
alt: '',
}) }}>
{% endif %}
{% elseif logo|default %}
<div class="card__logo{{ forceTransparentLogo|default ? ' card__logo--force-transparent' }}">
{% include '@image' with logo | merge({
disablePlaceholder: true,
}) only %}
</div>
{% elseif useFallbackImage %}
{% include '@image' with {
src: asset('images/card-placeholder-image.svg'),
width: 800,
height: 450,
decorative: true,
cover: true,
} only %}
{% endif %}
{% if context|default %}
<div class="card__context">
<div class="card__context-icon">
{% include '@icon' with { icon: context.icon } only %}
</div>
<div class="card__context-text">
{{- context.text -}}
</div>
</div>
{% endif %}
</div>
{% endif %}
<div class="card__content">
{% if badge|default %}
<div class="card__badge">
{% if badge.icon|default %}
<span class="card__badge-icon">
{% include '@icon' with { icon: badge.icon } only %}
</span>
{% endif %}
{% if badge.text|default %}
<span class="card__badge-text u-line-clamp">
{{- badge.text -}}
</span>
{% endif %}
</div>
{% endif %}
<div class="card__head">
{% if actionBar|default %}
<div class="card__action-bar">
{% include '@action-bar' with actionBar | merge({
inline: true,
}) only %}
</div>
{% endif %}
{% if breadcrumbs|default %}
<ul class="card__breadcrumbs">
{% for breadcrumb in breadcrumbs -%}
<li class="card__breadcrumb">
{{- breadcrumb | strip_control_characters -}}
</li>
{%- endfor %}
</ul>
{% endif %}
{% if headline|default %}
<div class="card__headline u-line-clamp">
{% include '@headline' with headline | merge({
link: link ?? false,
size: 3,
overlay: true,
level: level,
target: target ?? null,
linkAttrs: linkAttrs ?? null,
}) only %}
</div>
{% endif %}
</div>
{% macro meta(text, label = null, labelVisible = true, icon = null, attrs = {}) %}
<div {{ html_attributes({ class: 'card__detail' }, attrs) }}>{% apply spaceless %}
<dt class="card__detail-label">
{% if icon %}
<span class="card__detail-label-icon">
{%- include '@icon' with { icon: icon } only -%}
</span>
{% endif %}
<span class="card__detail-label-text{{ not labelVisible ? ' u-hidden-visually' }}">
{{- label ??? ('Information' | t('site')) -}}
</span>
</dt>
<dd class="card__detail-text">
{{- text -}}
</dd>
{% endapply %}</div>
{% endmacro %}
{% if hintBox|default or location|default or details|default %}
<dl class="card__details">
{% if hintBox|default %}
{% set value = hintBox.value ?? '' %}
{% set showTime = showTime ?? false %}
{% if value is instance of('\\DateTimeInterface') %}
{% set text = format_date(value) ~ (showTime ? " / #{value | time('short')}") %}
{{ _self.meta(text, hintBox.label ??? 'Date' | t('site'), showDetailLabels, 'calendar-alt', 'time', { datetime: value | date(showTime ? 'Y-m-d' : 'Y-m-d H:i') }) }}
{% elseif value is iterable %}
{% set startValue = value[0] %}
{% set endValue = value[1] ?? startValue %}
{% set text = format_date(startValue, endValue) ~ (showTime ? " / #{startValue | time('short')} – #{endValue | time('short')}") %}
{{ _self.meta(text, hintBox.label ??? 'Date' | t('site'), showDetailLabels, 'calendar-alt', 'time', {
datetime: startValue | date(showTime ? 'Y-m-d' : 'Y-m-d H:i') ~ '/' ~ endValue | date(showTime ? 'Y-m-d' : 'Y-m-d H:i'),
}) }}
{% else %}
{% set label = hintBox.label ?? (
hintBox.asInformation|default ? 'Information' | t('site') : 'Date' | t('site')
) %}
{{ _self.meta(value, label, showDetailLabels ? hintBox.label, hintBox.asInformation|default ? 'info-alt' : 'calendar-alt') }}
{% endif %}
{% endif %}
{% if location|default %}
{{ _self.meta(location, 'Place' | t('site'), showDetailLabels, 'marker') }}
{% endif %}
{% for detail in details|default([]) %}
{{ _self.meta(detail.text, detail.label ?? null, true, detail.icon ?? null) }}
{% endfor %}
</dl>
{% endif %}
{% if description|default %}
<div class="card__description">
{{- description | componentize -}}
</div>
{% endif %}
</div>
</div>
</article>
{
"headline": {
"kicker": "Optionaler Kicker",
"text": "Titel mit beinahe beliebig vielen Zeichen, da die Card mitwächst"
},
"link": "#",
"description": "Um die regionale, hausärztliche Versorgung perspektivisch und nachhaltig sicherzustellen, bietet der Landkreis Hof ein Stipendium für Medizinstudierende an. Das Stipendium wird frühestens ab Beginn des Wintersemesters eines…"
}
.card {
container-name: card;
container-type: inline-size;
position: relative;
&:has(.card__headline :focus-visible:not(.u-invisible-focus)) {
@include use-focus-outline();
}
&:has(:any-link:hover, :focus-visible:not(.u-invisible-focus)) {
--image-cover-zoom: 1.05;
}
}
.card:is([data-card-color='cyan']) {
--card-image-background-color: var(--color-cyan-light);
--card-highlight-background-color: var(--color-cyan-light);
}
.card:is([data-card-color='green']) {
--card-image-background-color: var(--color-green-light);
--card-highlight-background-color: var(--color-green-light);
}
.card:is([data-card-color='yellow']) {
--card-image-background-color: var(--color-yellow-light);
--card-highlight-background-color: var(--color-yellow-light);
}
.card:is([data-card-color='purple']) {
--card-image-background-color: var(--color-purple-light);
--card-highlight-background-color: var(--color-purple-light);
}
.card:is([data-card-color='blue']) {
--card-image-background-color: var(--color-blue-light);
--card-highlight-background-color: var(--color-blue-light);
}
.card:is([data-card-color='red']) {
--card-image-background-color: var(--color-red-light);
--card-highlight-background-color: var(--color-red-light);
}
.card:is([data-card-color='orange']) {
--card-image-background-color: var(--color-orange-light);
--card-highlight-background-color: var(--color-orange-light);
}
.card__inner {
block-size: 100%;
column-gap: 3rem;
display: flex;
flex-direction: column;
row-gap: 2.5rem;
.card:is([data-card-type='list']) & {
@container card (inline-size >= 50rem) {
--card-badge-max-width: clamp(20rem, 33.33%, 30rem);
--card-image-width: clamp(20rem, 33.33%, 30rem);
flex-direction: row;
}
}
.card:is([data-card-type='highlight']) & {
--card-content-padding-inline: min(4cqi, 2rem);
--card-content-padding-block: 3rem;
background-color: var(--card-highlight-background-color, var(--color-orange-light));
row-gap: 0;
@container card (inline-size >= 60rem) {
--card-image-height: 100%;
--card-image-aspect-ratio: auto;
--card-content-padding-inline: min(5cqi, 4rem);
--card-content-justify-content: center;
--card-badge-max-width: 50%;
--card-image-order: 2;
aspect-ratio: 16 / 10;
display: grid;
grid-auto-flow: column;
grid-template-columns: 1fr 1fr;
&:has(.card__badge) {
--card-content-padding-block: 8rem 3.8rem;
}
}
@container card (inline-size >= 70rem) {
aspect-ratio: 16 / 6;
}
@container card (inline-size >= 100rem) {
aspect-ratio: 16 / 4;
}
}
}
.card__image {
align-self: flex-start;
aspect-ratio: var(--card-image-aspect-ratio, 16 / 9);
background-color: var(--card-highlight-background-color, var(--color-blue-light));
background-color: var(--card-image-background-color, var(--color-blue-light));
block-size: var(--card-image-height, auto);
display: flex;
flex-direction: column;
flex-shrink: 0;
inline-size: var(--card-image-width, 100%);
justify-content: center;
order: var(--card-image-order, auto);
position: relative;
z-index: 1;
}
.card__logo {
align-self: center;
max-inline-size: min(60%, 30rem);
}
.card__overlay-logo {
--image-max-height: 5.6rem;
block-size: min(33.33%, 10rem);
display: flex;
inline-size: auto;
inset-block-end: 0;
inset-inline-end: 0;
position: absolute;
z-index: 3;
}
.card__logo--force-transparent {
background-color: var(--card-image-background-color);
background-color: var(--card-highlight-background-color);
> * {
mix-blend-mode: multiply;
}
}
.card__context {
background-color: var(--card-highlight-background-color, var(--color-white));
inline-size: fit-content;
inset-block-end: 0;
inset-inline-end: 0;
padding-block: 1.6rem;
padding-inline: 2.4rem;
position: absolute;
text-align: center;
z-index: 4;
}
.card__context-icon {
font-size: 2rem;
}
.card__context-text {
font-size: 1.4rem;
font-weight: var(--font-weight-bold);
margin-block-start: 0.8rem;
white-space: nowrap;
}
.card__content {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: var(--card-content-gap, 1rem);
justify-content: var(--card-content-justify-content, flex-start);
padding-block: var(--card-content-padding-block, 0);
padding-inline: var(--card-content-padding-inline, 0);
> :first-child {
margin-block-start: 0;
}
> :last-child {
margin-block-end: 0;
}
}
.card__badge {
align-items: center;
background-color: var(--card-badge-background-color, var(--color-midnight));
block-size: var(--card-badge-height, 5.6rem);
color: var(--card-badge-color, var(--color-white));
display: flex;
font-size: var(--card-badge-font-size, 1.6rem);
font-weight: var(--card-badge-font-weight, var(--font-weight-semibold));
gap: var(--card-badge-gap, 0.5em);
inline-size: fit-content;
inset-block-start: 0;
inset-inline-start: 0;
line-height: var(--card-badge-line-height, var(--line-height-small));
margin-block-end: 2rem;
max-inline-size: var(--card-badge-max-width, 100%);
padding-inline: var(--card-badge-padding, 1.2em);
z-index: 2;
.card:has(.card__image) & {
margin-block-end: 0;
position: absolute;
}
}
.card__badge-icon {
color: var(--card-badge-icon-color, var(--color-orange));
font-size: var(--card-badge-icon-size, 1.2em);
line-height: 0;
}
.card__badge-text {
--line-clamp: 1;
}
.card__action-bar {
float: right;
padding-block-end: 1.5rem;
padding-inline-start: 1.5rem;
position: relative;
z-index: 5;
}
.card__breadcrumbs {
color: var(--card-breadcrumb-color, var(--color-grey-dark));
font-size: var(--card-breadcrumb-font-size, 1.4rem);
line-height: var(--card-breadcrumb-line-height, var(--line-height-default));
margin-block-end: 1.5rem;
}
.card__breadcrumb {
display: inline;
&:not(:last-child)::after {
content: '/';
margin-inline: 0.5em;
}
}
.card__headline {
--headline-kicker-font-weight: var(--font-weight-regular);
--headline-kicker-spacing: 1rem;
--line-clamp: var(--card-headline-line-clamp, 4);
--focus-outline-width: 0;
--focus-outline-color: transparent;
overflow-wrap: break-word;
padding-block-end: 0.2rem;
.card__breadcrumbs + & {
margin-block-start: var(--card-content-gap, 1rem);
}
}
.card__details {
display: grid;
gap: var(--card-details-gap, 1rem);
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.card__detail {
color: var(--card-details-color, var(--text-color));
font-size: var(--card-details-font-size, 1.5rem);
line-height: var(--card-details-line-height, var(--line-height-body));
position: relative;
&:has(.card__detail-label-icon) {
padding-inline-start: calc(var(--card-details-icon-size, 1.1em) + var(--card-details-gap, 0.6em));
}
}
.card__detail-label {
display: contents;
}
.card__detail-label-icon {
color: var(--card-details-icon-color, var(--color-orange));
font-size: var(--card-details-icon-size, 1.1em);
inset-block-start: 0.2em;
inset-inline-start: 0;
line-height: 0;
position: absolute;
}
.card__detail-label-text {
display: inline;
font-weight: var(--font-weight-semibold);
margin-inline-end: 0.4em;
&::after {
content: ':';
}
}
.card__detail-text {
display: inline;
}
.card__description {
font-size: var(--card-description-font-size, 1.6rem);
line-height: var(--card-description-line-height, var(--line-height-body));
margin-block-start: 0.5rem;
}
No notes defined.