<div class="bux-card bux-card--linked-headline" role="group" aria-label="Card">
<a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>
<img class="bux-image bux-image--16x9" src="https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg" alt="Three young people lay hands on the face of Thompson Library bust" />
<div class="bux-card__content">
<h3 class="bux-card__heading">
<a href="#" class="bux-card__heading--link">
<span>Card Heading</span>
</a>
</h3>
<div class="bux-card__body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
{#
Card
Available variables:
- modifier: Sets the card variant. Allowed values: null, gray,
no-border, linked-headline, storytelling, featured,
horizontal, horizontal-storytelling
- card_heading_level: Integer. Sets the heading level of the card heading.
- card_image: Boolean. Set to true to display image.
- image_url: URL for the card image.
- image_alt_text: Alt text for the card image.
- card_heading: String for the card heading.
- card_name: String for the type of card for aria-label. Default: "Card".
- card_body: Content of the card body. Optional.
- card_url: URL for the card.
- card_cta: String for the card CTA.
- taxonomy: String for the storytelling card taxonomy.
- read_time: String for the storytelling card read time.
#}
{% set dateBox %}
<div class="bux-card--event__date--wrapper">
<div class="bux-card--event__date">
<div class="bux-card--event__date--month">{{ event.date.month }}</div>
<div class="bux-card--event__date--day">{{ event.date.day }}</div>
</div>
{% if event.date_end %}
<div class="bux-card--event__date-divider">to</div>
<div class="bux-card--event__date">
<div class="bux-card--event__date--month">{{ event.date_end.month }}</div>
<div class="bux-card--event__date--day">{{ event.date_end.day }}</div>
</div>
{% endif %}
</div>
{% endset %}
<div class="bux-card {% if modifier %}bux-card--{{ modifier }}{% endif %}" role="group" aria-label="{{ card_name|default("Card") }}">
<a class="bux-card__link" href="{{ card_url }}" aria-hidden="true" tabindex="-1"></a>
{% if card_image %}
{% if event %}
<div class="bux-card__image">
{{ dateBox }}
{% endif %}
{% set class = 'bux-image--16x9' %}
{% include '@image' %}
{% if event %}
</div>
{% endif %}
{% elseif event %}
{{ dateBox }}
{% endif %}
<div class="bux-card__content">
{% if taxonomy %}
<span class="bux-card__taxonomy">
{{ taxonomy }}
</span>
{% endif %}
<h{{ card_heading_level|default(2) }} class="bux-card__heading">
{% if modifier == "linked-headline" or modifier == "event"
or modifier == "event-horizontal" %}
<a href="{{ card_url }}" class="bux-card__heading--link">
{% elseif modifier == "storytelling" or modifier == "horizontal-storytelling" %}
<a href="{{ card_url }}" class="bux-card__heading--storytelling-link">
{% endif %}
<span>{{ card_heading }}</span>
{% if modifier == "linked-headline" or modifier == "storytelling"
or modifier == "horizontal-storytelling" or modifier == "event"
or modifier == "event-horizontal" %}
</a>
{% endif %}
</h{{ card_heading_level|default(2) }}>
{% if card_body %}
<div class="bux-card__body">
{{ card_body }}
</div>
{% endif %}
{% if modifier == "event" or modifier == "event-horizontal" %}
<div class="bux-mar-top-sp-16">
{% include '@list-description-icons' with list_items %}
</div>
{% endif %}
{% if modifier == "linked-headline" or modifier == "event"
or modifier == "event-horizontal" %}
{% elseif modifier == "storytelling" or modifier == "horizontal-storytelling" %}
<span class="bux-card__read-time">{{ read_time }}</span>
{% elseif card_cta %}
{% if modifier == "featured" %}
<a class="bux-button bux-button--alt" href="{{ card_url }}">{{ card_cta }}</a>
{% else %}
<div class="bux-card__cta">
<a href="{{ card_url }}">
<span>{{ card_cta }}</span>
</a>
</div>
{% endif %}
{% endif %}
</div>
</div>
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
image_url: https://s3.amazonaws.com/bux.osu.edu/img/example-images/oxley_9599.jpg
image_alt_text: Three young people lay hands on the face of Thompson Library bust
card_heading_level: 3
card_heading: Card Heading
card_body: >-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
card_url: '#'
card_cta: Call to Action
card_image: true
modifier: linked-headline
.bux-grid.bux-card-collection {
align-items: stretch;
.bux-card {
height: 100%;
}
}
.bux-card {
border-top: 4px solid $scarlet;
color: $gray-dark-80;
position: relative;
display: flex;
flex-direction: column;
background-color: $white;
overflow: clip;
}
.bux-card__link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bux-card {
.bux-image {
align-self: flex-start;
object-fit: cover;
aspect-ratio: 16/9;
transition: transform 0.4s ease-in-out;
}
&:hover .bux-image {
transform: scale(1.05);
}
}
.bux-card__content {
padding: $sp-24;
border: 2px solid $gray-light-90;
border-top: none;
position: relative;
z-index: 2;
pointer-events: none;
flex: 1;
background-color: $white;
}
.bux-card--gray, .bux-card--gray .bux-card__content {
background-color: $gray-light-90;
}
.bux-card--no-border,
.bux-card--storytelling,
.bux-card--horizontal,
.bux-card--horizontal-storytelling {
.bux-card__content {
border: 0;
padding: 0;
padding-top: $sp-24;
padding-right: $sp-24;
}
}
.bux-card--storytelling,
.bux-card--horizontal-storytelling {
border-top: none;
.bux-card__heading {
font-family: $serif;
font-size: $ts-md;
font-weight: 700;
}
}
.bux-card--event-horizontal {
border-top: none;
.bux-card__content {
border-left: 0;
border-right: 0;
padding: $sp-24 0;
}
}
.bux-card__read-time {
font-size: $ts-base;
color: $gray-dark-40;
margin-top: $sp-8;
&::before {
content: "\f302";
font-family: $icon;
font-size: $ts-sm;
margin-right: 6px;
margin-top: 1.5px;
float: left;
}
}
*.bux-card__heading {
font-size: $ts-22;
line-height: rem-calc(28);
font-weight: 700;
margin-bottom: $sp-8;
}
.bux-card__body {
font-size: $ts-18;
line-height: rem-calc(28);
font-weight: 400;
margin-top: $sp-8;
margin-bottom: $sp-16;
}
.bux-card__cta {
margin-top: $sp-8;
position: relative;
z-index: 2;
a {
color: $gray-dark-80;
pointer-events: all;
text-decoration: none;
display: table;
&::after {
content: "\f005";
font-size: $ts-sm;
font-family: $icon;
font-weight: 600;
color: $scarlet;
padding-left: $sp-8;
transition-duration: 0.05s;
display: table-cell;
vertical-align: middle;
}
&:hover {
color: $scarlet;
&::after {
padding-left: $sp-16;
transition-duration: 0.05s;
}
}
&:focus {
outline: 2px solid $focus;
outline-offset: $sp-4;
}
}
}
.bux-card--linked-headline,
.bux-card--storytelling,
.bux-card--horizontal-storytelling {
.bux-card__body {
margin-bottom: $sp-8;
}
}
.bux-card--linked-headline {
.bux-card__heading {
display: inline-block;
margin-bottom: 0;
width: 100%;
}
}
.bux-card__heading--link {
text-decoration: none;
color: $gray-dark-80;
pointer-events: all;
display: flex;
justify-content: space-between;
&::after {
content: "\f005";
font-size: $ts-md;
font-family: $icon;
color: $scarlet;
transition-duration: 0.05s;
vertical-align: -0.2em;
width: 5%;
}
&:focus {
outline: 2px solid $focus;
}
}
.bux-card__heading--storytelling-link {
text-decoration: none;
color: $gray-dark-80;
pointer-events: all;
&:focus {
outline: 2px solid $focus;
}
}
.bux-card:hover {
.bux-card__heading--link {
color: $scarlet;
text-decoration: none;
&::after {
transition-duration: 0.05s;
width: 3%;
}
}
.bux-card__heading--storytelling-link {
text-decoration: none;
}
}
.bux-card--horizontal-storytelling:hover .bux-card__heading span {
text-decoration: none;
box-shadow: none;
text-shadow: none;
color: $gray-dark-80;
}
.bux-card--storytelling:hover .bux-card__heading span,
.bux-card--horizontal-storytelling:hover .bux-card__heading span {
color: $gray-dark-80;
text-decoration: none;
box-shadow: inset 0 -3px 0 0 $gray-dark-80;
text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 2px 0 0 #fff, -2px 0 0 #fff;
}
.bux-card--storytelling .bux-card__heading span:hover,
.bux-card--horizontal-storytelling .bux-card__heading span:hover {
color: $gray-dark-80;
}
.bux-card__taxonomy {
color: $scarlet;
text-transform: uppercase;
font-size: $ts-sm;
line-height: rem-calc(18);
margin-bottom: $sp-8;
display: inline-block;
}
.bux-card--featured {
display: block;
background-color: $white;
max-width: 100%;
margin-right: 0;
.bux-card__content {
padding: $sp-32;
}
.bux-button {
text-decoration: none;
display: inline-block;
}
&:hover .bux-button {
background-color: $gray-dark-60;
color: $white;
border-color: $gray-dark-60;
}
}
.bux-card__image {
position: relative;
}
.bux-card--event,
.bux-card--event-horizontal {
&__date {
background-color: $gray-light-90;
max-height: fit-content;
max-width: fit-content;
text-align: center;
color: $scarlet;
font-weight: 700;
font-size: $ts-base;
text-transform: uppercase;
padding: $sp-8 $sp-32;
line-height: 1.3;
&--month {
font-size: $ts-base;
}
&--day {
font-size: $ts-28;
}
&-divider {
background-color: $white;
padding: $sp-8;
}
}
.bux-card--event__date--wrapper {
display: flex;
align-items: center;
&:has(.bux-card--event__date-divider) .bux-card--event__date {
padding: $sp-8 $sp-24;
}
}
.bux-card__image {
.bux-card--event__date--wrapper {
position: absolute;
bottom: 0;
z-index: 10;
}
}
.bux-card__taxonomy {
color: $gray-dark-40;
}
.bux-icon-dl__item {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: $sp-16;
&:last-child {
margin-bottom: 0;
}
dd {
margin: 0;
margin-left: $sp-8;
}
}
}
@include breakpoint(md) {
.bux-card--horizontal,
.bux-card--horizontal-storytelling {
border-top: none;
flex-direction: row;
max-width: 100%;
.bux-card__heading {
font-size: $ts-md;
}
.bux-image {
max-width: 33%;
margin-right: $sp-32;
object-fit: cover;
}
.bux-card__content {
padding-top: 0;
}
}
.bux-card--event-horizontal {
border-top: none;
flex-direction: row;
max-width: 100%;
align-items: flex-start;
border-bottom: 2px solid $gray-light-80;
.bux-card__image {
display: contents;
.bux-card--event__date {
position: relative;
}
.bux-card--event__date--wrapper {
position: relative;
flex-direction: column;
padding-bottom: $sp-32;
}
.bux-image {
order: 3;
flex: 1;
margin-bottom: $sp-24;
max-width: 25%;
}
}
.bux-card__content {
border: none;
align-self: stretch;
padding: 0 $sp-24 $sp-24;
}
}
.bux-card--horizontal-storytelling {
border-bottom: 2px solid $gray-light-60;
padding-bottom: $sp-32;
.bux-card__content {
padding-left: 0;
border: 0;
}
.bux-card__body {
margin-bottom: $sp-8;
}
}
}
No notes defined.