Menu

Card - Product - Card Store

Open fullscreen 
<article class="mp c-card c-card--layout-multi c-card--size-medium c-card--bordered c-card--inline-specs c-card--has-image">
  <div class="c-card__wrapper">
    <figure class="c-card__image">
      <a href="#">
        <img class="" src="/static/img/range-product-1.jpg" alt="Product image alt"  />
      </a>
    </figure>
    <div class="c-card__primary">
      <header class="c-card__header u-flow--2xs">
        <h2 class="c-h c-card__title"><a href="#">Scirocco 2000 Consumable Kit</a></h2>
      </header>
      <div class="c-card__content u-flow">
        <div class="mp o-prose u-flow--prose u-step--1">
          <p>Kit includes: Flow Diffusing Sphere Stainless Steel for DPFs, Sample Tubing 300mm Long 5/16" i/d x ½" o/d, Scirocco 2000 Set of Spare Fuses, Packet of Lens Tissues, Fine Sieve Basket Assembly 0.8mm small mesh, Coarse Sieve Basket Assembly 1.6mm large mesh, Quality Audit Standard Pack of Ten 2.5g Bottles, 1/2in wide paint brush.</p>
        </div>
        <div class="c-card__specs">
          <dl>
            <dt>Product number:</dt>
            <dd>ADA4005</dd>
          </dl>
          <dl>
            <dt>Compatible with:</dt>
            <dd>Mastersizer 3000</dd>
            <dd>Mastersizer 3000E</dd>
          </dl>
        </div>
      </div>
      <footer class="c-card__footer u-flow--2xs">
        <div>
          <a href="#" class="mp c-twi u-link c-twi--left"><span>View full details</span>
            <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--arrow-right">
              <use xlink:href="/static/svg/sprite.svg#arrow-right"></use>
            </svg>
          </a>
        </div>
      </footer>
    </div>
  </div>
  <footer class="c-card__shop-footer">
    <span></span>
    <div class="u-split u-split--top">
      <div class="u-flow">
        <div class="c-card__flex">
          <div class="c-card__shop-footer-space">
            <span>List price</span>
            <strong>£326.00</strong>
          </div>
          <div class="c-card__shop-footer-space">
            <span>Lead time</span>
            <strong>1-2 weeks</strong>
          </div>
        </div>
        <p class="c-card__small">Discount will be applied at checkout</p>
      </div>
      <form class="c-card__shop-footer-form c-card__flex">
        <div class="c-card__shop-footer-space">
          <label for="product-1234">Quantity</label>
          <input class="c-input" type="number" id="product-1234"  />
        </div>
        <div>
          <button type="submit" class="mp c-button" >Add to basket</button>
        </div>
      </form>
    </div>
  </footer>
</article>
{
  "theme": {
    "border": true,
    "size": "medium",
    "layout": "multi",
    "noFullLink": true,
    "inlineSpecs": true
  },
  "image": {
    "src": "/static/img/range-product-1.jpg",
    "alt": "Product image alt"
  },
  "header": {
    "title": "Scirocco 2000 Consumable Kit"
  },
  "body": {
    "content": "<p>Kit includes: Flow Diffusing Sphere Stainless Steel for DPFs, Sample Tubing 300mm Long 5/16\" i/d x ½\" o/d, Scirocco 2000 Set of Spare Fuses, Packet of Lens Tissues, Fine Sieve Basket Assembly 0.8mm small mesh, Coarse Sieve Basket Assembly 1.6mm large mesh, Quality Audit Standard Pack of Ten 2.5g Bottles, 1/2in wide paint brush.</p>",
    "keySpecs": [
      {
        "title": "Product number",
        "term": "ADA4005"
      },
      {
        "title": "Compatible with",
        "terms": [
          "Mastersizer 3000",
          "Mastersizer 3000E"
        ]
      }
    ]
  },
  "footer": {
    "cta": {
      "link": "#",
      "label": "View full details",
      "icon": "arrow-right"
    }
  },
  "shop": {
    "labels": [
      {
        "key": "List price",
        "value": "£326.00"
      },
      {
        "key": "Lead time",
        "value": "1-2 weeks"
      }
    ],
    "small": "Discount will be applied at checkout",
    "productId": "1234"
  }
}

CSS modifiers

Name Description
c-card--alt Petrol step 3 alternative background
c-card--featured Petrol background, white text
c-card--event Alt background with grey text
c-card--layout-[type] multi, single Left- or top-aligned image
c-card--size-[size] small, medium, large Title and gap size control
c-card--bordered Add a border to the card
c-card--no-height-match Prevent cards matching height with siblings
c-card--inline-specs Render specs inline, rather than wrapped

Props

Name Type Description
theme object themeOptions
header object headerOptions
body object bodyOptions
footer object footerOptions
tag string Name of the tag
link string For cards without a CTA
shop object shopOptions
series series[]

themeOptions

Name Type Description
name string Name of the theme: alt, featured
border bool Does the card have a border
size string Size of the card (default: large)
layout string "multi" or "single"
inlineSpecs string Are the specifications inline or wrapped
noFullLink bool Is there a giant link covering the entire card?
noHeightMatch bool Should the card ignore height matching?
corner bool Does the card have a green corner

headerOptions

Name Type Description
title string
subtitle string
meta string[] Additional snippets of useful information
date object dateOptions

dateOptions

Name Type Description
date date Datetime of the instance
time string String-based time
timezone string String-based timezone
duration string Providing this will make it a 'past event'

bodyOptions

Name Type Description
content html Prose-based content
keySpecs keySpecs[]

keySpecs

Name Type Description
title string
term string
terms string[]

footerOptions

Name Type Description
cta footerLink
buttons footerLink[]

footerLink

Name Type Description
label string Label for the call to action
link string URL for the element
colour string Optional button style

shopOptions

Name Type Description
labels array key/value objects
small string Short shop description
productId string