Styleguide

Quicklinks Item: Extended 

<div class="quicklink-item ">
    <div class="quicklink-item-icon"><i class="fal fa-arrow-right"></i></div>
    <div class="label-title quicklink-item-title">title here</div>
    <div class="quicklink-item-text">lorem impsum dolor sit amet consecteur diallo lorem</div>
    <a href="#lorem" class="btn btn-primary">Mehr erfahren</a>
</div>
 
<div class="quicklink-item {{ align }}">
    <div class="quicklink-item-icon">{{ icon_id }}</div>
    {% if title %}
    <div class="label-title quicklink-item-title">{{ title }}</div>
    {% endif %}
    <div class="quicklink-item-text">{{ text }}</div>
    {% if button_text %}
    <a href="{{ href }}" class="btn btn-primary">{{ button_text }}</a>
    {% endif %}
    {% if overlay_link %}
    <a href="{{ href }}" class="overlay-link"></a>
    {% endif %}
</div>
 
{
  "icon_id": "<i class=\"fal fa-arrow-right\"></i>",
  "title": "title here",
  "text": "lorem impsum dolor sit amet consecteur diallo lorem",
  "href": "#lorem",
  "button_text": "Mehr erfahren",
  "overlay_link": false,
  "align": ""
}
  • Content: 
    .quicklink-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	position: relative;
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;

	@include media-breakpoint-up(md) {
		max-width: 100%;
	}

	.quicklink-item-title {
		color: $primary;

		+ .quicklink-item-text {
			@extend .text-medium;
		}
	}
	.quicklink-item-icon {
		color: $primary;
		font-size: 6rem;
		margin-bottom: 2rem;
	}
	.quicklink-item-text {
		margin-bottom: $space-b;
		text-align: center;
		@extend .text-base;
		flex-grow: 1;
		max-width: 100%;
	}

	&.left {
		align-items: flex-start;
		text-align: left;

		.quicklink-item-text {
			text-align: left;
		}

		[data-scrollable="true"] & {
			align-items: center;
			text-align: center;

			.quicklink-item-text {
				text-align: center;
			}

			@include media-breakpoint-up(md) {
				align-items: flex-start;
				text-align: left;

				.quicklink-item-text {
					text-align: left;
				}
			}
		}
	}
	.overlay-link {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
	}
}
  • URL: /components/raw/quicklink-item/quicklink-item.scss
  • Filesystem Path: components/02-components/quicklinks/quicklink-item/quicklink-item.scss
  • Size: 1.1 KB

There are no notes for this item.