Card: Linked Headline

Ready

HTML
Twig
Context
Assets
Info
Notes


        
        <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

File:

Content:


                                .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;
        max-width:100%;
      }
      .bux-card--event__date--wrapper {
        position: relative;
        flex-direction: column;
        align-items: stretch;
        padding-bottom: $sp-32;
      }
      .bux-card--event__date-divider {
        text-align: center;
      }
      .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;
    }
  }
}

URL: /components/raw/card/_card.scss
Filesystem Path: src/components/card/_card.scss
Size: 7.4 KB

Handle: @card--linked-headline
Preview:
- With layout
- Component only
Filesystem Path: src/components/card/card.twig
References (2): @image, @list-description-icons
Referenced by (2): @microinteractions, @visual-demo

No notes defined.