Styleguide

CTA Item 

<div class="cta-item">
    <div class="cta-item-details">
        <div class="cta-item-title">lorem ipsum dolor</div>
        <div class="cta-item-text"></div>
    </div>
    <div class="cta-item-btn">
        <a href="#lorem" target="_self" class="btn btn-primary">Download PDF</a>
    </div>
</div>
 
<div class="cta-item">
    <div class="cta-item-details">
        <div class="cta-item-title">{{ title }}</div>
        <div class="cta-item-text">{{ text }}</div>
    </div>
    {% if link_text %}
        <div class="cta-item-btn">
            <a href="{{ link_href }}"{% if link_target %} target="{{ link_target }}"{% endif %} class="btn btn-primary">{{ link_text }}</a>
        </div>
    {% endif %}
</div>
 
{
  "title": "lorem ipsum dolor",
  "text": "",
  "link_href": "#lorem",
  "link_text": "Download PDF",
  "link_target": "_self"
}
  • Content: 
    .cta-item {
	padding: 1.5rem 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid $color-medium-grey;

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

	.cta-item-details {
		flex-grow: 1;

		.cta-item-title {
			font-weight: 700;
			@extend .title-small-normal;
			margin-bottom: 0;
		}
		.cta-item-text {
			//font-style: italic;
			margin-top: 1rem;
			&:empty {
				display: none;
			}
		}
	}
	.cta-item-btn {
		width: 100%;
		@include media-breakpoint-up(sm) {
			width: auto;
		}
		.btn {
			width: 100%;
			text-align: center;
			justify-content: center;
			margin-top: 1rem;
			height: 5rem;

			@include media-breakpoint-up(sm) {
				width: auto;
				margin-top: 0;
			}
		}
	}
}
  • URL: /components/raw/cta-item/cta-item.scss
  • Filesystem Path: components/02-components/cta-item/cta-item.scss
  • Size: 733 Bytes

There are no notes for this item.