<div class="card card-cta">
<div class="card-container js--clickable">
<div class="card-wrapper">
<picture class="picture ">
<img class="picture-image " src="//placehold.co/480x264" alt="">
</picture>
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
<div class="btn-wrapper"> <a href="#" class="button button-red ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
</div>
</div>
</div>
<div class="card card-{{modifier}}">
<div class="card-container {{#if cta}}js--clickable{{/if}}">
{{#if title-top}}
<div class="card-container-title-top">{{render '@heading--h2'}}</div>
{{/if}}
{{#if image}}
<div class="card-wrapper">
{{render '@image' image}}
{{#if date-block}}
{{render '@date-block'}}
{{/if}}
{{#if tag}}
{{render '@tag'}}
{{/if}}
</div>
{{/if}}
{{#if video}}
<div class="card-wrapper">
{{render '@video'}}
{{#if date-block}}{{render '@date-block'}}{{/if}}
</div>
{{/if}}
{{#if no-media}}
<div class="card-wrapper">
{{#if date-block}}{{render '@date-block'}}{{/if}}
{{#if date-block-horizontal}}
{{render '@date-block--horizontal'}}
{{/if}}
</div>
{{/if}}
{{#if heading}}
{{#unless title-top}}
<div class="heading-container">
{{render '@heading' heading}}
{{#if heading-icon}}
{{render '@icon' heading-icon}}
{{/if}}
</div>
{{/unless}}
{{/if}}
<div class="information">
{{#if time}}
<div class="info-row">
<div>{{render '@icon' time.icon}}</div>
<span class="text">{{time.text}}</span>
</div>
{{/if}}
{{#if date}}
<div class="info-row">
<div>{{render '@icon' date.icon}}</div>
<span class="text">{{date.text}}</span>
</div>
{{/if}}
{{#if location}}
<div class="info-row">
<div>{{render '@icon' location.icon}}</div>
<span class="text">{{location.text}}</span>
</div>
{{/if}}
{{#if phone}}
<div class="info-row">
<div>{{render '@icon' phone.icon}}</div>
<span class="text">{{render '@link' phone.link}}</span>
</div>
{{/if}}
{{#if text}}
{{render '@paragraph'}}
{{/if}}
{{#if content}}
{{{content}}}
{{/if}}
{{#if quote}}
<div class="info-row">
<div>{{render '@icon' time.icon}}</div>
<span class="text">{{time.text}}</span>
</div>
{{/if}}
</div>
{{#if cta}}<div class="btn-wrapper">{{render '@button' cta merge=true}}</div>{{/if}}
</div>
</div>
{
"modifier": "cta",
"title-top": false,
"date-block": false,
"date-block-horizontal": false,
"heading": {
"tag": "h2",
"text": "Lorem ipsum dolor sit amet",
"modifier": "title"
},
"image": {
"src": "//placehold.co/480x264"
},
"time": false,
"date": false,
"location": false,
"phone": false,
"cta": {
"text": "This is a CTA Button",
"element": "a",
"type": "",
"title": "",
"target": "",
"href": "#",
"id": "",
"icon": false,
"modifier": "red"
},
"quote": false,
"no-media": false,
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo."
}
.card {
@apply flex flex-col;
.info-row {
@apply text-black-600;
}
.text {
font-family: 'Hind';
}
.card-container {
@apply bg-white border border-solid border-gray shadow-xl;
&.js--clickable {
@apply cursor-pointer;
}
.card-container-title-top {
padding: 20px 20px 0 20px;
}
}
.extra-link {
@apply pt-8;
.text {
@apply underline text-red;
}
}
.picture {
@apply w-auto h-full;
img {
@apply w-full h-full;
object-fit: cover;
}
}
.card-wrapper {
@apply relative order-1 mb-12;
.date-block {
@apply p-4 absolute -bottom-8 right-8 z-10;
}
}
.heading-container {
display: flex;
align-items: center;
}
.heading-icon {
margin-left: 16px;
&.heading-icon-green {
@apply text-green;
}
}
.title {
@apply relative mx-8 mb-4 order-2;
}
.information {
@apply flex flex-col mx-8 mb-8 order-3;
.info-row {
@apply flex items-center;
div {
@apply mr-2 w-5 block;
}
.text {
@apply block;
}
}
.paragraph {
@apply mt-4;
}
.paragraph:first-letter {
text-transform: capitalize;
}
}
.btn-wrapper {
@apply relative order-4 mx-8 mb-8;
}
.extra-link {
@apply relative order-5 mx-8 mb-8 text-right;
}
&.card-full {
.card-wrapper {
@apply order-1;
}
.information {
@apply order-2;
}
.btn-wrapper {
@apply order-4;
}
}
&.card-title-top {
.card-wrapper {
@apply order-2;
}
.title {
@apply order-1 mt-4;
}
}
&.card-no-image {
.card-container {
.heading {
@apply mt-8 md:mt-0;
}
}
.card-wrapper {
@apply mb-4;
.date-block {
@apply mt-8 ml-8 relative bottom-auto right-auto;
}
}
}
&.card-list {
.card-container {
.heading {
@apply mt-8 md:mt-0;
}
}
.card-wrapper {
@apply mb-4;
.date-block {
@apply mt-8 ml-8 relative bottom-auto right-auto;
}
}
}
&.card-tag {
.card-wrapper {
@apply mb-8;
}
.tag {
@apply absolute bottom-8 left-8 text-white bg-black bg-opacity-20;
}
.btn-wrapper {
@apply hidden;
}
}
&.card-cta {
.card-wrapper {
@apply order-2 mb-4;
}
.title {
@apply order-1 text-red mt-4;
}
}
&.card-detail,
&.card-empty {
.card-container {
padding: 40px;
}
.card-wrapper {
display: none;
}
p {
margin: 0;
font-size: 20px;
line-height: 150%;
}
.title {
@apply text-red;
font-size: 32px;
margin: 0 0 20px 0;
}
.paragraph {
margin: 0;
}
.information {
margin: 0;
}
.quote-card__container {
display: flex;
justify-content: space-between;
}
.quote-card {
min-width: 300px;
margin-right: -40px;
margin-left: 10vw;
}
}
&.card-small {
.card-container {
@apply shadow-xxs;
padding: 16px;
}
.card-wrapper {
display: none;
}
p {
margin: 0;
font-size: 20px;
line-height: 150%;
}
.title {
@apply text-red;
order: initial;
font-size: 16px;
margin: 0;
}
.paragraph {
margin: 0;
}
.information {
margin: 0;
}
}
&.card-quote {
@apply flex flex-col;
.card-wrapper {
@apply mb-4;
}
.name {
@apply text-red;
}
.function {
@apply text-sm font-bold;
}
.place {
@apply my-2;
}
.quote-text {
@apply relative italic py-6;
.icon {
@apply absolute bottom-0 right-0 opacity-10;
}
}
}
&.card-news {
.paragraph {
@apply mt-0;
}
}
}
No notes defined.