BFNA Design System

Product Card: Item 

<div class="product-card product-card--politics-society product-card--item">
    <div class="product-card__image">
        <img src="/images/products/politics-society/cepi.png" alt="2019 Edition | ">
    </div>
    <div class="product-card__content">
        <header class="product-card__header">
            <h2 class="product-card__heading">2019 Edition</h2>
            <h3 class="product-card__subheading"></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--politics-society" target="_blank">Learn More</a>
        </footer>
    </div>
</div>
 
<div class="product-card{% if theme %} product-card--{{theme}}{% endif %}{% if type %} product-card--{{type}}{% endif %}">
    <div class="product-card__image">
      <img src="/images/products/{{ theme }}/{{image}}" alt="{{ heading }} | {{ subheading }}">
    </div>
    <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>
 
{
  "type": "item",
  "theme": "politics-society",
  "image": "cepi.png",
  "heading": "2019 Edition",
  "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.