Styleguide

Info Event 

<div class="infoevent">
    <div class="label-title">Lernen Sie diesen Bildungsgang kennen</div>
    <h3 class="title-small">Nächste Infoanlässe im Bildungszentrum Sihlpost</h3>
    <div class="contentbox-content">Für Details auf Datum klicken.</div>
    <ul>
        <li>
            <a href="#lorem"><b>Montag, 19. August 2019, 18:15 Uhr</b></a>
        </li>
        <li>
            <a href="#lorem"><b>Montag, 30. September 2019, 18:15 Uhr</b></a>
        </li>
        <li>
            <a href="#lorem"><b>Montag, 15. Dezember 2019, 18:15 Uhr</b></a>
        </li>
    </ul>
</div>
 
<div class="infoevent">
    <div class="label-title">{{ label }}</div>
    <h3 class="title-small">{{ title }}</h3>
    {% if subtitle is defined %}
        <div class="contentbox-content">{{ subtitle }}</div>
    {% endif %}
    <ul>
        {% for item in items%}
        <li>
            <a{% if item.link_href %} href="{{ item.link_href }}"{% endif %}><b>{{ item.link_text -}}</b>{%- if item.event_format %}<span class="format">, {{ item.event_format }}</span>{% endif %}</a>
        </li>
        {% endfor %}
    </ul>
</div>
 
{
  "label": "Lernen Sie diesen Bildungsgang kennen",
  "title": "Nächste Infoanlässe im Bildungszentrum Sihlpost",
  "subtitle": "Für Details auf Datum klicken.",
  "items": [
    {
      "item": null,
      "link_text": "Montag, 19. August 2019, 18:15 Uhr",
      "link_href": "#lorem"
    },
    {
      "item": null,
      "link_text": "Montag, 30. September 2019, 18:15 Uhr",
      "link_href": "#lorem"
    },
    {
      "item": null,
      "link_text": "Montag, 15. Dezember 2019, 18:15 Uhr",
      "link_href": "#lorem"
    }
  ]
}
  • Content: 
    .infoevent {
	background: $color-light-grey;
	padding: 1rem 0;

	@include media-breakpoint-up(lg) {
		padding: 1rem;
	}

	.label-title {
		color: $primary;
		margin-bottom: 0.5rem;
	}
	.title-small {
		font-style: normal;
		margin-bottom: 0;
	}

	ul {
		list-style: none;
		margin: 0;
		margin-top: 0.5rem;
		padding: 0;

		li {
			a {
				position: relative;
				display: block;
				font-size: 1.4rem;

        .format {
          color: $danger;
        }
			}
		}
	}
}
  • URL: /components/raw/infoevent/infoevent.scss
  • Filesystem Path: components/02-components/sidebar/infoevent/infoevent.scss
  • Size: 472 Bytes

There are no notes for this item.