<div class="search-item event">
    <div class="search-item-title">lorem ipsum <span class="search-highlight">dolor</span> sit amet</div>
    <div class="search-item-content">
        <div class="search-item-event-data">
            <p><b>Datum & Uhrzeit:</b> 15.04.2020 10:00 Uhr</p>
            <p><b>Veranstalter:</b> Lorem ipsum dolor</p>
        </div>

    </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": "At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
  "overlay_link": false,
  "person_image": "",
  "person_mail": "",
  "person_phone": "",
  "person_function": "",
  "event_date_label": "Datum & Uhrzeit:",
  "event_custom_label": "Veranstalter:",
  "event_date": "15.04.2020",
  "event_time": "10:00 Uhr",
  "event_custom_field": "Lorem ipsum dolor",
  "variant": "event"
}
  • Content:
    .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;
    	}
    }
    
  • URL: /components/raw/search-item/search-item.scss
  • Filesystem Path: components/02-components/search-item/search-item.scss
  • Size: 786 Bytes

There are no notes for this item.