BFNA Design System

Product List 

<div class="wrapper">
    <div class="product-list">
        <div class="product-card-wrapper">
            <div class="product-card product-card--future-leadership product-card--website">
                <div class="product-card__image">
                    <img src="/images/products/future-leadership/the-future-of-work-transatlantic-cities-and-the-future-of-work.png" alt="The Future Leadership | Transatlantic Cities &amp; the Future Leadership">
                </div>
                <div class="product-card__content">
                    <header class="product-card__header">
                        <h2 class="product-card__heading">The Future Leadership</h2>
                        <h3 class="product-card__subheading">Transatlantic Cities &amp; the Future Leadership</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>

        </div>
        <div class="product-card-wrapper">
            <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>
        <div class="product-card-wrapper">
            <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>
        <div class="product-card-wrapper">
            <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>
        <div class="product-card-wrapper">
            <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>
    </div>
</div>
 
<div class="wrapper">
  <div class="product-list">
    <div class="product-card-wrapper">
      {% render '@product-card--website' %}
    </div>
    <div class="product-card-wrapper">
      {% render '@product-card' %}
    </div>
    <div class="product-card-wrapper">
      {% render '@product-card--report' %}
    </div>
    <div class="product-card-wrapper">
      {% render '@product-card' %}
    </div>
    <div class="product-card-wrapper">
      {% render '@product-card--report' %}
    </div>
  </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .product-list {
  @include breakpoint($large) { margin-top: calc(var(--s2)*-1);}
  
  .product-card-wrapper + .product-card-wrapper { 
    padding-top: var(--s2); 
    @include breakpoint($large) { padding-top: var(--s4); }
  }
}
  • URL: /components/raw/product-list/product-list.scss
  • Filesystem Path: src/components/05-templates/product-list/product-list.scss
  • Size: 229 Bytes

There are no notes for this item.