<article class="mp c-card c-card--layout-multi c-card--size-large c-card--bordered">
<div class="c-card__wrapper">
<div class="c-card__primary">
<header class="c-card__header u-flow--2xs">
<h2 class="c-h c-card__title"><a href="#">Vials and seals</a></h2>
<h3 class="c-h c-h--tagline">Sizing from buoyant mass</h2>
</header>
<div class="c-card__content u-flow">
<div class="mp o-prose u-flow--prose u-step--1">
<p>Two types of screw-top glass vial – 20mL and 40mL capacity - are available for use with Archimedes. By using the dedicated vial seals a snug fit to the instrument is created, enabling pressure to be maintained throughout Archimedes’ fluidics system.</p><ul>
<li>20mL screw-top glass vials.</li>
<li>Vial seals create a pressure-tight fitting.</li>
<li>Vials need only be finger-tight.</li>
<li>Additional seals available for snug fitting of fluidics lines into reference and waste bottles.</li>
<li>Inserts such as eppendorf tubes may be used for smaller sample volumes inside 20mL vial.</li>
</ul>
</div>
</div>
<footer class="c-card__footer u-flow--2xs">
<div>
<a href="#" class="mp c-button c-button--inline c-button--green" >Purchase now</a>
<a href="#" class="mp c-button c-button--inline c-button--outline-green" >Request a quote</a>
</div>
</footer>
</div>
</div>
</article>
Card - Product card - Range (no image)
{
"theme": {
"border": true,
"layout": "multi",
"noFullLink": true
},
"header": {
"title": "Vials and seals",
"subtitle": "Sizing from buoyant mass"
},
"body": {
"content": "<p>Two types of screw-top glass vial – 20mL and 40mL capacity - are available for use with Archimedes. By using the dedicated vial seals a snug fit to the instrument is created, enabling pressure to be maintained throughout Archimedes’ fluidics system.</p><ul>\n <li>20mL screw-top glass vials.</li>\n <li>Vial seals create a pressure-tight fitting.</li>\n <li>Vials need only be finger-tight.</li>\n <li>Additional seals available for snug fitting of fluidics lines into reference and waste bottles.</li>\n <li>Inserts such as eppendorf tubes may be used for smaller sample volumes inside 20mL vial.</li>\n </ul>"
},
"footer": {
"buttons": [
{
"link": "#",
"label": "Purchase now"
},
{
"link": "#",
"label": "Request a quote"
}
]
}
}
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