Design System cards

---
layout: layouts/designsystem
---
<section>
  <div class="margin-left-1 margin-right-1 grid grid-md-2-cols grid-lg-3-cols">
  
    <article class="box margin-bottom-3 portfolio-card">
        <a href="#" class="nonederline">
          
          <div style="background-image: url('/projects/design-system-agibdk/img/design-system-agibdk-w500px.png')" role="img" aria-label="Temp" class="portfolio-cover-image promote-subtly"></div>
        </a>
        <a href="#" class="nonederline">
          <h5 class="page-section-heading margin-bottom-0">Context</h5>
          <h2 class="margin-top-0 pointer-right-after">
            Title
          </h2>
        </a>
        <p>
           Cillum incididunt ipsum laborum nisi aliquip voluptate velit laborum officia irure voluptate esse. Eu consectetur anim ex pariatur irure ut nostrud mollit eu enim qui amet sit incididunt. Quis est nulla labore laboris proident aute est Lorem do quis pariatur. Irure officia incididunt anim eiusmod elit irure minim elit sit Lorem velit nisi tempor nisi.
        </p>
    </article>	
    <article class="box margin-bottom-3 portfolio-card">
      <a href="#" class="nonederline">
        
        <div style="background-image: url('/projects/design-system-agibdk/img/design-system-agibdk-w500px.png')" role="img" aria-label="Temp" class="portfolio-cover-image promote-subtly"></div>
      </a>
      <a href="#" class="nonederline">
        <h5 class="page-section-heading margin-bottom-0">Context</h5>
        <h2 class="margin-top-0 pointer-right-after">
          Title
        </h2>
      </a>
      <p>
         Cillum incididunt ipsum laborum nisi aliquip voluptate velit laborum officia irure voluptate esse. Eu consectetur anim ex pariatur irure ut nostrud mollit eu enim qui amet sit incididunt. Quis est nulla labore laboris proident aute est Lorem do quis pariatur. Irure officia incididunt anim eiusmod elit irure minim elit sit Lorem velit nisi tempor nisi.
      </p>
   </article>	
    <article class="box margin-bottom-3 portfolio-card">
      <a href="#" class="nonederline">
      
        <div style="background-image: url('/projects/design-system-agibdk/img/design-system-agibdk-w500px.png')" role="img" aria-label="Temp" class="portfolio-cover-image promote-subtly"></div>
      </a>
      <a href="#" class="nonederline">
        <h5 class="page-section-heading margin-bottom-0">Context</h5>
        <h2 class="margin-top-0 pointer-right-after">
          Title
        </h2>
      </a>
      <p>
        Cillum incididunt ipsum laborum nisi aliquip voluptate velit laborum officia irure voluptate esse. Eu consectetur anim ex pariatur irure ut nostrud mollit eu enim qui amet sit incididunt. Quis est nulla labore laboris proident aute est Lorem do quis pariatur. Irure officia incididunt anim eiusmod elit irure minim elit sit Lorem velit nisi tempor nisi.
      </p>
    </article>	
    <article class="box margin-bottom-3 portfolio-card">
      <a href="#" class="nonederline">
        
        <div style="background-image: url('/projects/design-system-agibdk/img/design-system-agibdk-w500px.png')" role="img" aria-label="Temp" class="portfolio-cover-image promote-subtly"></div>
      </a>
      <a href="#" class="nonederline">
        <h5 class="page-section-heading margin-bottom-0">Context</h5>
        <h2 class="margin-top-0 pointer-right-after">
          Title
        </h2>
      </a>
      <p>
        Cillum incididunt ipsum laborum nisi aliquip voluptate velit laborum officia irure voluptate esse. Eu consectetur anim ex pariatur irure ut nostrud mollit eu enim qui amet sit incididunt. Quis est nulla labore laboris proident aute est Lorem do quis pariatur. Irure officia incididunt anim eiusmod elit irure minim elit sit Lorem velit nisi tempor nisi.
      </p>
    </article>	
  
  </div>
  </section>