<article class="mp c-card c-card--layout-multi c-card--size-small c-card--event c-card--inline-specs c-card--has-image">
<span class="c-card__corner">
<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>
</span>
<div class="c-card__wrapper">
<figure class="c-card__image">
<a href="#">
<img class="" src="/static/img/blog-page-image-1.jpg" alt="Product image alt" />
</a>
</figure>
<div class="c-card__primary">
<header class="c-card__header u-flow--2xs">
<time class="c-card__datetime">
<span class="c-card__day">1 </span>
<span class="c-card__month">Oct</span>
</time>
<p class="c-card__meta">
<span>11:00 – 12:00 EST</span>
<span>New York</span>
<span>English</span>
</p>
<h2 class="c-h c-card__title"><a href="#">Discover how on-line particle sizing optimises mining analytics.</a></h2>
</header>
<div class="c-card__content u-flow">
<div class="c-card__specs">
<dl>
<dt>Products:</dt>
<dd>Morphologi G3-ID</dd>
</dl>
<dl>
<dt>Technologies:</dt>
<dd>Morphologically-Directed Raman Spectroscopy</dd>
</dl>
</div>
</div>
</div>
<a class="u-fill u-fill--link" href="#">Discover how on-line particle sizing optimises mining analytics.</a>
</div>
</article>
Card - In-person event card with image
{
"theme": {
"border": false,
"size": "small",
"layout": "multi",
"name": "event",
"inlineSpecs": true,
"corner": true
},
"image": {
"src": "/static/img/blog-page-image-1.jpg",
"alt": "Product image alt"
},
"header": {
"title": "Discover how on-line particle sizing optimises mining analytics.",
"date": {
"date": "2024-10-01T10:52:25.432Z",
"time": "11:00 – 12:00",
"timezone": "EST"
},
"meta": [
"New York",
"English"
]
},
"body": {
"keySpecs": [
{
"title": "Products",
"term": "Morphologi G3-ID"
},
{
"title": "Technologies",
"term": "Morphologically-Directed Raman Spectroscopy"
}
]
},
"link": "#"
}
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 |
- Card
- Product Card - Promotional
- Product Card - Detailed
- Product card - Range (no image)
- Product - Card Store
- Article card - Whitepaper Medium
- Article card - Blog post
- Featured event card - Future
- Featured event card - Past
- Featured event card - Multi
- Event card - Future (home)
- Event card - Series part (home)
- Event card - Past (home)
- Event card - Past (home) multicolumn
- Event card - Past (away)
- Article card - single
- Article card - Alt
- Article card - Whitepaper
- Career card
- Product card - single
- In-person event card
- In-person event card with image
- On-demand event card
- On-demand event card with image
- Event series card
- Event series card with image