<div class="search-item normal">
<div class="search-item-title">lorem ipsum <span class="search-highlight">dolor</span> sit amet</div>
<div class="search-item-content">
normal content yeah
</div>
</div>
<div class="search-item {{ variant }}">
<div class="search-item-title">{{ title|raw }}</div>
<div class="search-item-content">
{% if variant == 'person' %}
<div class="search-item-person-image">{{ person_image }}</div>
<div class="search-item-person-data">
{% if person_function is not empty %}
<p><b>Funktion: </b> {{ person_function|raw }}</p>
{% endif %}
{% if person_phone is not empty %}
<p><b>Telefon: </b> <a href="tel:{{ person_phone }}">{{ person_phone }}</a></p>
{% endif %}
{% if person_mail is not empty %}
<p><b>E-Mail: </b> <a href="mailto:{{ person_mail }}">{{ person_mail }}</a></p>
{% endif %}
</div>
{% elseif variant == 'event' %}
<div class="search-item-event-data">
<p><b>{{ event_date_label }}</b> {{ event_date }} {{ event_time }}</p>
<p><b>{{ event_custom_label }}</b> {{ event_custom_field }}</p>
</div>
{% else %}
{{ content }}
{% endif %}
</div>
{% if overlay_link %}
<a class="overlay-link" href="{{ link_href }}"></a>
{% endif %}
</div>
{
"title": "lorem ipsum <span class=\"search-highlight\">dolor</span> sit amet",
"content": "normal content yeah",
"overlay_link": false,
"person_image": "",
"person_mail": "",
"person_phone": "",
"person_function": "",
"event_date_label": "",
"event_custom_label": "",
"event_date": "",
"event_time": "",
"event_custom_field": "",
"variant": "normal"
}
.search-item {
margin-bottom: 3rem;
position: relative;
font-variant-numeric: lining-nums;
&.person {
margin-bottom: 3rem;
}
&.event {
.search-item-title {
color: $primary;
font-weight: 700;
a {
color: inherit;
}
}
}
.search-item-title {
@extend .title-small-normal;
margin-bottom: 1rem;
}
.search-item-content {
display: flex;
}
.search-highlight {
background-color: lightgray;
}
.search-item-person-image {
max-width: 10rem;
width: 30%;
margin-right: 1rem;
&:empty {
display: none;
}
}
.search-item-person-data,
.search-item-event-data {
p {
margin-bottom: 0.5rem;
line-height: 1.4;
}
}
.overlay-link {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 10;
opacity: 0;
}
}
There are no notes for this item.