Styleguide

Infobox 

<div class="infobox">
    <p>Sie sind sich nicht ganz sicher, ob dieses Bildungsangebot das richtige für Sie ist? Oder Sie haben noch Fragen? Besuchen Sie einen unserer Infoanlässe oder nehmen Sie mit unserem Beratungsteam Kontakt auf.</p>
    <div class="infobox-actions">
        <a href="" class="btn btn-secondary">
            lorem 1
            <i class="fal fa-plus "></i> </a>
        <a href="" class="btn btn-secondary">
            lorem 2
        </a>
        <a href="" class="btn btn-secondary">
            lorem 3
        </a>
    </div>
</div>
 
<div class="infobox">
  <p>{{ text }}</p>
  <div class="infobox-actions">
  {% for item in items %}
    <a href="{{ item.link_href }}" class="btn {{ item.btn_type }}">
      {{ item.link_text }}
      {% if item.icon_id %}
      {% render "@components/01-core/icon/icon.twig" with {
          icon_type: item.icon_type,
          icon_id: item.icon_id,
          icon_options: ''
      } %}
      {% endif %}
    </a>
  {% endfor %}
  </div>
</div>
 
{
  "text": "Sie sind sich nicht ganz sicher, ob dieses Bildungsangebot das richtige für Sie ist? Oder Sie haben noch Fragen? Besuchen Sie einen unserer Infoanlässe oder nehmen Sie mit unserem Beratungsteam Kontakt auf.",
  "items": [
    {
      "item": null,
      "link_text": "lorem 1",
      "link_href": "",
      "icon_type": "fal",
      "icon_id": "fa-plus",
      "icon_options": "",
      "btn_type": "btn-secondary"
    },
    {
      "item": null,
      "link_text": "lorem 2",
      "link_href": "",
      "icon_type": "fal",
      "icon_id": "",
      "icon_options": "",
      "btn_type": "btn-secondary"
    },
    {
      "item": null,
      "link_text": "lorem 3",
      "link_href": "",
      "icon_type": "fal",
      "icon_id": "",
      "icon_options": "",
      "btn_type": "btn-secondary"
    }
  ]
}
  • Content: 
    .infobox {
	background: $dark-blue;
	color: #fff;
	padding: 3rem;
	margin-bottom: 6rem;
	margin-top: 3rem;
	margin-left: -3rem;
	margin-right: -3rem;

	@include media-breakpoint-up(md) {
		margin-left: auto;
		margin-right: auto;
		padding: 1.5rem 1.5rem 1rem;
		max-width: 910px;
	}

	@extend .text-medium;

	.infobox-actions {
		display: flex;
		flex-wrap: wrap;
		@extend .row;

		@include media-breakpoint-up(sm) {
			flex-wrap: nowrap;
		}

		.btn {
			text-align: center;
			justify-content: center;
			margin: 0 $grid-gutter-width / 2;
			margin-bottom: 1rem;
			min-width: 26rem;
			flex-grow: 1;
			height: 3.5rem;
			@include media-breakpoint-up(sm) {
				min-width: 0;
			}

			@include media-breakpoint-up(md) {
				&:only-child {
					flex-grow: 1;
					max-width: 40rem;
				}
			}
			svg {
				margin-left: 1rem;
				color: $primary;
			}
			// only set flex-grow when they are 3 buttons
			&:first-child:nth-last-child(3),
			&:first-child:nth-last-child(3) ~ .btn {
				flex-grow: 1;
			}
		}
	}
}
  • URL: /components/raw/infobox/infobox.scss
  • Filesystem Path: components/02-components/infobox/infobox.scss
  • Size: 1 KB

There are no notes for this item.