<div class="card">
<div class="card-image">
<img src="http://placekitten.com/833/468" class="card-img-top" alt="" />
</div>
<div class="card-body">
<h3 class="card-title">
This is the Title </h3>
<div class="card-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="card-buttons">
<a href="#" class="btn btn-primary dark-grey" role="button">
<span class="button_text">Button 1</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
<a href="#" class="btn btn-primary dark-grey" role="button">
<span class="button_text">Button 2</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div>
</div>
</div>
{% set card_headline_element = card_headline_element|default('h3') %}
<div class="card">
{% block card_img %}
{% if card_img %}
<div class="card-image">
<img src="{{ card_img }}" class="card-img-top" alt="" />
</div>
{% endif %}
{% endblock card_img %}
<div class="card-body">
{% block card_heading %}
{% if card_headline %}
<{{ card_headline_element }} class="card-title">
{% if card_link %}<a href="{{ card_link }}">{% endif %}{{ card_headline }}{% if card_link %}</a>{% endif %}
</{{ card_headline_element }}>
{% endif %}
{% endblock card_heading %}
{% block card_content %}
{% if card_content %}
<div class="card-text">
<p>{{ card_content }}</p>
</div>
{% endif %}
{% endblock card_content %}
{% block card_buttons %}
{% if buttons %}
<div class="card-buttons">
{% for button in buttons %}
{% include "@a_tag" with button only %}
{% endfor %}
</div>
{% endif %}
{% endblock card_buttons %}
</div>
</div>
{
"card_img": "http://placekitten.com/833/468",
"card_link": null,
"card_headline": "This is the Title",
"card_content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"card_headline_element": "h3",
"buttons": {
"1": {
"text": "Button 1",
"url": "#",
"color": "dark-grey"
},
"2": {
"text": "Button 2",
"url": "#",
"color": "dark-grey"
}
}
}
.card {
width: 100%;
background-color: $white;
background-color: var(--white, $white);
border-left: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 5px;
border-top: 3px solid $accent_color;
border-top: 3px solid var(--accent_color, $accent_color);
-webkit-box-shadow: 0 5px 15px $drop_shadow;
-moz-box-shadow: 0 5px 15px $drop_shadow;
box-shadow: 0 5px 15px $drop_shadow;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
.color-scheme-dark & {
-webkit-box-shadow: 0 5px 15px $drop_shadow_darkmode;
-moz-box-shadow: 0 5px 15px $drop_shadow_darkmode;
box-shadow: 0 5px 15px $drop_shadow_darkmode;
}
.right-content & {
margin: 0 0 $space-two 0;
}
.card-img-top {
transition: transform .2s;
}
&:hover,
&:focus-within {
-webkit-box-shadow: 0 0 10px $drop_shadow;
-moz-box-shadow: 0 0 10px $drop_shadow;
box-shadow: 0 0 10px $drop_shadow;
.color-scheme-dark & {
-webkit-box-shadow: 0 0 10px $drop_shadow_darkmode;
-moz-box-shadow: 0 0 10px $drop_shadow_darkmode;
box-shadow: 0 0 10px $drop_shadow_darkmode;
}
.card_image {
img {
transform: scale(1.25);
}
}
}
.card-image {
.media {
display: block;
}
img {
width: 100%;
}
}
&-body {
display: flex;
flex-direction: column;
.card-title {
color: $body-color;
color: var(--body-color, $body-color);
a {
color: inherit;
text-decoration: underline;
border-bottom: 0;
&:hover,
&:focus {
text-decoration: none;
.color-scheme-dark & {
color: $body-color;
color: var(--body-color, $body-color);
}
.accent-lehigh_brown &,
.accent-blue_k60 & {
.color-scheme-dark & {
color: $white;
color: var(--white, $white);
}
}
}
}
}
.card-buttons {
margin-top: auto;
}
}
&-text {
margin: $spacer 0;
.color-scheme-dark & {
color: $base_font;
color: var(--base_font, $base_font);
}
a {
color: $hyperlink_breadcrumb;
color: var(--hyperlink_breadcrumb, $hyperlink_breadcrumb);
border-bottom: 2px solid $hyperlink_breadcrumb;
border-bottom: 2px solid var(--hyperlink_breadcrumb, $hyperlink_breadcrumb);
.accent-lehigh_brown &,
.accent-blue_k60 & {
color: $white;
color: var(--white, $white);
border-bottom: 2px solid $white;
border-bottom: 2px solid var(--white, $white);
}
}
.color-scheme-dark & {
a {
color: $hyperlink_breadcrumb;
color: var(--hyperlink_breadcrumb, $hyperlink_breadcrumb);
border-bottom: 2px solid $hyperlink_breadcrumb;
border-bottom: 2px solid var(--hyperlink_breadcrumb, $hyperlink_breadcrumb);
.accent-lehigh_brown &,
.accent-blue_k60 & {
color: $white;
color: var(--white, $white);
border-bottom: 2px solid $white;
border-bottom: 2px solid var(--white, $white);
}
&:hover,
&:focus {
color: $black;
color: var(--black, $black);
border-bottom: $accent_color;
border-bottom: var(--accent_color, $accent_color);
}
}
}
}
.btn {
margin: $space-one-half;
}
// .accent-lehigh_brown &,
// .accent-blue_k60 & {
// .card-body {
// color: $white;
// color: var(--white, $white);
// .card-title {
// color: $white;
// color: var(--white, $white);
// }
// .card-text {
// .color-scheme-dark & {
// color: $white;
// color: var(--white, $white);
// }
// }
// }
// }
}
Display card with image and buttons.