<div class="bux-featured-card bux-grid bux-grid--no-gutters bux-featured-card--image-left ">
<div class="bux-featured-card--wrapper bux-grid__cell bux-grid__cell--12 bux-grid__cell--5@md">
<div class="bux-card bux-card--event" role="group" aria-label="Featured Event Card">
<a class="bux-card__link" href="#" aria-hidden="true" tabindex="-1"></a>
<div class="bux-card--event__date--wrapper">
<div class="bux-card--event__date">
<div class="bux-card--event__date--month">Sept</div>
<div class="bux-card--event__date--day">23</div>
</div>
<div class="bux-card--event__date-divider">to</div>
<div class="bux-card--event__date">
<div class="bux-card--event__date--month">Oct</div>
<div class="bux-card--event__date--day">3</div>
</div>
</div>
<div class="bux-card__content">
<span class="bux-card__taxonomy">
Optional topic
</span>
<h2 class="bux-card__heading">
<a href="#" class="bux-card__heading--link">
<span>Event Title</span>
</a>
</h2>
<div class="bux-mar-top-sp-16">
<dl class="bux-icon-dl bux-icon-dl--event-end-date">
<div class="bux-icon-dl__item">
<dt class="icon icon-clock">Time</dt>
<dd>
1:30 p.m. - 3:30 p.m.
</dd>
</div>
<div class="bux-icon-dl__item">
<dt class="icon icon-location-pin">Location</dt>
<dd>
BLIC / Library
</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
<div class="bux-featured-card--image bux-grid__cell bux-grid__cell--12 bux-grid__cell--7@md">
<img class="bux-image " src="https://bux.osu.edu/img/example-images/osu-bux-2.jpg" alt="A marching band member high-fiving a crowd" />
</div>
</div>
{#
Featured Card
This component uses the card with the 'featured' modifier as a sub-component.
Available variables:
- image_position: Sets the position of the featured card image. Either
'left' or 'right'.
See the 'card' component for variables to be passed into the card.
#}
<div class="bux-featured-card bux-grid bux-grid--no-gutters {% if image_position %} bux-featured-card--image-{{image_position}} {% endif %}">
<div class="bux-featured-card--wrapper bux-grid__cell bux-grid__cell--12 bux-grid__cell--5@md">
{% if modifier == "event" %}
{% include '@card--event-no-image' %}
{% else %}
{% include '@card' %}
{% endif %}
</div>
<div class="bux-featured-card--image bux-grid__cell bux-grid__cell--12 bux-grid__cell--7@md">
{% include '@image' %}
</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
modifier: event
card_heading: Event Title
card_body: ''
card_url: '#'
card_cta: Call to Action
image_url: https://bux.osu.edu/img/example-images/osu-bux-2.jpg
image_alt_text: A marching band member high-fiving a crowd
taxonomy: Optional topic
card_name: Featured Event Card
image_position: left
event:
date:
year: 2025
month: Sept
day: 23
date_end:
year: 2025
month: Oct
day: 3
list_items:
- term: Time
desc: 1:30 p.m. - 3:30 p.m.
icon: clock
- term: Location
desc: BLIC / Library
icon: location-pin
.bux-featured-card {
flex-direction: column-reverse;
@media only screen and (max-width: $bp-md) {
border-top: 4px solid $scarlet;
.bux-card--event {
overflow: visible;
border-top: none;
&__date--wrapper {
position: absolute;
top: -73.2px;
}
}
}
@include breakpoint(md) {
flex-direction: row;
}
.bux-featured-card--image {
@include breakpoint(md) {
flex-basis: 66.6%;
}
img {
height: 100%;
object-fit: cover;
max-width: 100%;
@include breakpoint(md) {
width: 100%;
}
}
}
.bux-featured-card--wrapper {
align-self: center;
max-width: 100%;
margin-left: 0;
@include breakpoint(md) {
margin-right: -8.33%;
}
}
&--image-left {
@include breakpoint(md) {
flex-direction: row-reverse;
.bux-featured-card--wrapper {
margin-left: -8.33%;
margin-right: 0;
}
}
}
}
If making changes to the card sub-element, please make those changes in the card component, where it is a variant. This component imports the card--featured component and builds around it.