@cagov/ds-card-grid v1.0.4

Card grid component

The card grid depends on individual cards and lays them out in a grid

HTML

<div class="cagov-grid">
  <a href="linkurl" class="no-deco cagov-card">
    <h3>card title here</h3>
    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24"
      width="24px">
      <g>
        <path d="M0,0h24v24H0V0z" fill="none" />
      </g>
      <g>
        <polygon points="6.23,20.23 8,22 18,12 8,2 6.23,3.77 14.46,12" />
      </g>
    </svg>
  </a>
  <!-- ... design expects 3 cards usually -->
</div>

Audits

Running the lighthouse audits against this HTML & CSS should produce no issues

Development

From the command line at the root of this project you can run:

npm run start

Which will start the web-dev server and will launch a new page linking to the components, click on hero to get the page created by preview.html

Expected variables

There are some colors that should be defined by the containing page.

• The header text color, bottom border color and fill of the svg use a default value but if the css variable is defined

Expected definition is:

:root {
  --primary-color: #33705B;
  --gray-100: #f9f9fa;
  --gray-200: #ededef;
}