<article class="mp c-card c-card--layout-multi c-card--size-medium c-card--bordered c-card--has-tag">
<span class="c-card__tag">Whitepaper</span>
<div class="c-card__wrapper">
<div class="c-card__primary">
<header class="c-card__header u-flow--2xs">
<p class="c-card__meta">
<span>12 Jan 2015</span>
<span>English</span>
</p>
<h2 class="c-h c-card__title"><a href="#">Accelerating the deformulation workflow for oral solid dosage forms</a></h2>
</header>
<div class="c-card__content u-flow">
<div class="mp o-prose u-flow--prose u-step--1">
<p>This whitepaper on Oral Solid Dose (OSD) deformulation demonstrates how the analytical technique of Morphologically Directed Raman Spectroscopy (MDRS) can be used to accelerate the development of generic products to a successful conclusion.</p>
</div>
<div class="c-card__specs">
<dl>
<dt>Products:</dt>
<dd>Morphologi G3-ID</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>Read the whitepaper</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>
<a class="u-fill u-fill--link" href="#">Accelerating the deformulation workflow for oral solid dosage forms</a>
</div>
</article>
Card - Article card - Whitepaper Medium
{
"theme": {
"border": true,
"size": "medium",
"layout": "multi"
},
"header": {
"title": "Accelerating the deformulation workflow for oral solid dosage forms",
"meta": [
"12 Jan 2015",
"English"
]
},
"body": {
"content": "<p>This whitepaper on Oral Solid Dose (OSD) deformulation demonstrates how the analytical technique of Morphologically Directed Raman Spectroscopy (MDRS) can be used to accelerate the development of generic products to a successful conclusion.</p>",
"keySpecs": [
{
"title": "Products",
"term": "Morphologi G3-ID"
}
]
},
"footer": {
"cta": {
"link": "#",
"label": "Read the whitepaper",
"icon": "arrow-right"
}
},
"tag": "Whitepaper"
}
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