<div class="bux-featured-card bux-grid bux-grid--no-gutters bux-featured-card--image-right ">
<div class="bux-featured-card--wrapper bux-grid__cell bux-grid__cell--12 bux-grid__cell--5@md">
<div class="bux-card bux-card--featured" role="group" aria-label="Card">
<div class="bux-card__content">
<h2 class="bux-card__heading">
<span>Featured Card Heading</span>
</h2>
<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>
<a class="bux-button bux-button--alt" href="#">Call to Action</a>
</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: featured
card_heading: Featured 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
image_url: https://bux.osu.edu/img/example-images/osu-bux-2.jpg
image_alt_text: A marching band member high-fiving a crowd
.bux-featured-card {
flex-direction: column-reverse;
@media only screen and (min-width: $bp-md) {
.bux-card--event__date--wrapper {
border-right: 2px solid $gray-light-90;
}
}
@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.