BFNA Design System

Product Card 

<div class="product-card product-card--democracy product-card--video">
    <div class="product-card__content">
        <header class="product-card__header">
            <h2 class="product-card__heading">How to Fix Democracy</h2>
            <h3 class="product-card__subheading">Interviews on democracy&#39;s past, present and future</h3>
        </header>
        <div class="product-card__body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitatio</p>
        </div>
        <footer class="product-card__footer">
            <a href="#" class="button button--primary button--democracy" target="_blank">Learn More</a>
        </footer>
    </div>
    <div class="product-card__image">
        <img src="/images/products/democracy/democracy-how-to-fix-democracy.png" alt="How to Fix Democracy | Interviews on democracy&#39;s past, present and future">
    </div>
</div>
 
<div class="product-card{% if theme %} product-card--{{theme}}{% endif %}{% if type %} product-card--{{type}}{% endif %}">
  <div class="product-card__content">
    <header class="product-card__header">
      <h2 class="product-card__heading">{{ heading }}</h2>
      <h3 class="product-card__subheading">{{ subheading }}</h3>  
    </header>    
    <div class="product-card__body">
      <p>{{ description }}</p>  
    </div>
    <footer class="product-card__footer">
      <a href="{{ button.url }}" class="button button--primary button--{{theme}}" target="_blank">{{button.label}}</a>
    </footer>
  </div>
  <div class="product-card__image">
    <img src="/images/products/{{ theme }}/{{image}}" alt="{{ heading }} | {{ subheading }}">
  </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    // Structural Styles
.product-card {
  --theme-hsl: var(--navy-hsl);

  display: flex;
  align-items: center;
  justify-content: center;

  @include breakpoint($medium-max) {
    flex-direction: column;
  }

  &__image { 
    position: relative;

    @include breakpoint($medium-max) { order: -1; }
    @include breakpoint($large) { flex: 6; }
    > img {         
      @include breakpoint($medium-max) { 
        margin: -15% -2% -8%; 
        max-width: 104%;
      }
      @include breakpoint($large) { max-width: 90%; }
    }
  }

  &__content { 
    @include breakpoint($large) { flex: 5; }
  }
}

// Visual Styles
.product-card {
  background: var(--color-white) 0% 0% no-repeat padding-box;
  box-shadow: 0px 8px 32px hsla(var(--black-hsl), .15);
  min-height: 500px;

  &__content { 
    padding: 2rem; 
    @include breakpoint($medium-up) { padding: 3rem; }
  }

  &__heading {
    margin-top: 0;
    padding: 0;
    color: hsla(var(--theme-hsl), 1);
    font-weight: bold;
  }

  &__header,
  &__body,
  &__footer {
    text-align: left;
    @include breakpoint($large) {
      text-align: right;
    }
  }
}

.product-card--item {
  min-height: 0;
  
  @include breakpoint($large) {
    margin-left: var(--s1);
    margin-right: var(--s1);
  }

  .product-card__image { 
    @include breakpoint($large) {
      flex: 3;
      margin: calc(var(--s1)*-1);
    }
  }
}

@include breakpoint($large) {
  .product-card--item:nth-of-type(odd) {
    margin-left: var(--s4);

    .product-card__image > img { margin-left: calc(var(--s2) * -1); }
    .product-card__content { padding-left: var(--s0); }
    .product-card__header,
    .product-card__body,
    .product-card__footer { text-align: left; }
  }

  .product-card--item:nth-of-type(even) { 
    margin-right: var(--s4);

    .product-card__content { order: -1; }

    .product-card__header,
    .product-card__body,
    .product-card__footer { text-align: right; }
  }
}

.product-card--report {
  .product-card__image {
    padding: 2rem;
    align-self: flex-start;
    text-align: center;
    
    > img {
      max-width: 100%;
      margin: -30% 0 -15%;
      @include breakpoint($medium) { max-width: 50%; }
      @include breakpoint($large) {
        top: 0;
        left: 0;
        max-width: 110%;
        position: absolute;
        margin: -15% -2% -8%; 
      }
    }
  }
}

.product-card--website {
  @include breakpoint($large) {
    background: none;
    box-shadow: none;
  }

  .product-card {
    &__image {
      @include breakpoint($large) {
        z-index: -1;
        align-self: flex-start;

        > img {
          margin: -12.7%;
          max-width: 180%;
          width: 180%;
        }
      }
    }

    &__content {
      @include breakpoint($large) {
        background: var(--color-white) 0% 0% no-repeat padding-box;
        box-shadow: 0px 8px 32px hsla(var(--black-hsl), .15);
        margin-top: 20%;
        align-self: flex-end;
      }
    }

    &__header,
    &__body,
    &__footer {
      text-align: left;
      @include breakpoint($large) {
        max-width: 40vw;
        text-align: left;
      }
    }
  }
}

// Modifiers
.product-card--democracy { 
  --theme-hsl: var(--green-hsl); 
}

.product-card--future-leadership {
  --theme-hsl: var(--red-hsl);
}

.product-card--politics-society {
  --theme-hsl: var(--yellow-hsl);
}

.product-card--digital-world {
  --theme-hsl: var(--purple-hsl);
}
  • URL: /components/raw/product-card/product-card.scss
  • Filesystem Path: src/components/04-modules/product-card/product-card.scss
  • Size: 3.4 KB

There are no notes for this item.