BFNA Design System

Product Card: Report 

<div class="product-card product-card--future-leadership product-card--report">
    <div class="product-card__content">
        <header class="product-card__header">
            <h2 class="product-card__heading">The Future Leadership</h2>
            <h3 class="product-card__subheading">A Guide to Transatlantic Policymakers</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--future-leadership" target="_blank">Learn More</a>
        </footer>
    </div>
    <div class="product-card__image">
        <img src="/images/products/future-leadership/the-future-of-work-a-guide-to-transatlantic-policymakers.png" alt="The Future Leadership | A Guide to Transatlantic Policymakers">
    </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>
 
{
  "type": "report",
  "theme": "future-leadership",
  "image": "the-future-of-work-a-guide-to-transatlantic-policymakers.png",
  "heading": "The Future Leadership",
  "subheading": "A Guide to Transatlantic Policymakers",
  "description": "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",
  "button": {
    "label": "Learn More",
    "url": "#"
  }
}
  • 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.