Digital Design System
Generic Cards
The generic cards are used everywhere on the website to link between pages
Below you will find the different definitions and options to create your generic cards
Table of contents
Overview
Global Definition
Each generic card is based on a global CSS class called “msds-generic-card”. It is important to include this class first as it is the main CSS class of the component. Without this HTML class, you cannot utilize component.
There are 2 types of generic cards:
- The default Generic Cards
- Generic Cards with media information
Sizes
Generic Cards come in two different sizes, large (default) and small media cards.
Large
When using large generic cards, make use of the bootstrap column col-md-4.
<div class="row card-row">
<div class="col-12 col-md-4">
<div class="msds-generic-card msds-generic-card--vertical-aligned">
<a href="#" class="msds-generic-card--link">
<div class="msds-generic-card__frame embed-responsive embed-responsive-2by1">
<img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
alt="Card image">
</div>
<div class="msds-generic-card__body">
<h3 class="msds-generic-card__body-heading">
Headline lorem ipsum
</h3>
<p class="msds-generic-card__body-description">
Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
</p>
</div>
</a>
</div>
</div>
</div>
Small
When using small generic cards, make use of the bootstrap column col-md-3 and the HTML modifier class = "generic-card--small".
<div class="row card-row">
<div class="col-12 col-md-3">
<div class="msds-generic-card msds-generic-card--small msds-generic-card--vertical-aligned">
<a href="#" class="msds-generic-card--link">
<div class="msds-generic-card__frame embed-responsive embed-responsive-2by1">
<img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
alt="Card image">
</div>
<div class="msds-generic-card__body">
<h3 class="msds-generic-card__body-heading">
Headline lorem ipsum
</h3>
<p class="msds-generic-card__body-description">
Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
</p>
</div>
</a>
</div>
</div>
</div>
<div class="row card-row">
<div class="col-12 col-md-4">
<div class="msds-generic-card msds-generic-card--media">
<a href="#" class="msds-generic-card--link">
<div class="msds-generic-card__frame embed-responsive embed-responsive-16by9">
<div class="msds-generic-card__media-container">
<div class="msds-generic-card__floating-icon-container">
<svg class="msds-generic-card__floating-icon">
<use class="msds-generic-card__floating-icon"
href="../../../msds-spritemap.svg#play" />
</svg>
</div>
</div>
<img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
alt="Card image">
</div>
<div class="msds-generic-card__body">
<p class="msds-generic-card__body-text-above-headline">
MIPS 2020
</p>
<div class="msds-generic-card__body-heading">
Orchestration - The Future of Open Platforms lorem ipsum dolorem sit malesuada
</div>
</div>
</a>
<div class="msds-generic-card__media-info">
<div class="msds-generic-card__media-type">
<svg class="msds-generic-card__media-icon">
<use href="../../../msds-spritemap.svg#article" />
</svg>
Article
</div>
<div class="msds-generic-card__media-duration">
<svg class="msds-generic-card__media-icon">
<use href="../../../msds-spritemap.svg#clock" />
</svg>
6 min. read
</div>
</div>
</div>
</div>
</div>Aspect Ratios
Generic cards can be setup to use two different types of aspect ratios
- Generic Cards with a 2 by 1 ratio by using
class = "embed-responsive-2by1" - Generic Cards with a 16 by 9 ratio by using
class = "embed-responsive-16by9"
<div class="row card-row">
<div class="col-12 col-md-4">
<h1>Cards Aspect 16 by 9</h1>
</div>
<div class="col-12 col-md-4">
<h1>Cards Aspect 2 by 1</h1>
</div>
<div class="col-12 col-md-4">
</div>
<div class="col-12 col-md-4">
<div class="msds-generic-card msds-generic-card--vertical-aligned">
<a href="#" class="msds-generic-card--link">
<div class="msds-generic-card__frame embed-responsive embed-responsive-16by9">
<img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
alt="Card image">
</div>
<div class="msds-generic-card__body">
<h3 class="msds-generic-card__body-heading">
Headline lorem ipsum
</h3>
<p class="msds-generic-card__body-description">
Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
</p>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-4">
<div class="msds-generic-card msds-generic-card--vertical-aligned">
<a href="#" class="msds-generic-card--link">
<div class="msds-generic-card__frame embed-responsive embed-responsive-2by1">
<img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
alt="Card image">
</div>
<div class="msds-generic-card__body">
<h3 class="msds-generic-card__body-heading">
Headline lorem ipsum
</h3>
<p class="msds-generic-card__body-description">
Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
</p>
</div>
</a>
</div>
</div>
</div>Generic Cards With SVG’s
Generic cards can use SVG images instead of the default jpg or png images
<div class="row card-row">
<div class="col-12 col-md-4">
<div class="msds-generic-card msds-generic-card--vertical-aligned msds-generic-card--svg">
<a href="#" class="msds-generic-card--link">
<div class="msds-generic-card__frame embed-responsive embed-responsive-2by1 msds-bg-gray-gradient-1">
<div class="msds-generic-card__frame-image embed-responsive-item msds-no-backup"></div>
</div>
<div class="msds-generic-card__body">
<h3 class="msds-generic-card__body-heading">
Headline lorem ipsum
</h3>
<p class="msds-generic-card__body-description">
Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
</p>
</div>
</a>
</div>
</div>
</div>Themes
Generic Cards have two different themes
Light Themed Cards
Light theme cards are setup as the default card
<div class="row card-row">
<div class="col-12 col-md-4">
<div class="msds-generic-card msds-generic-card--vertical-aligned msds-generic-card--svg">
<a href="#" class="msds-generic-card--link">
<div class="msds-generic-card__frame embed-responsive embed-responsive-2by1 msds-bg-gray-gradient-1">
<div class="msds-generic-card__frame-image embed-responsive-item msds-no-backup"></div>
</div>
<div class="msds-generic-card__body">
<h3 class="msds-generic-card__body-heading">
Headline lorem ipsum
</h3>
<p class="msds-generic-card__body-description">
Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
</p>
</div>
</a>
</div>
</div>
</div>Dark Themed Cards
To use a dark themed card add the CSS class “msds-generic-card--dark-theme“
<div class="row card-row">
<div class="col-12 col-md-4">
<div
class="msds-generic-card msds-generic-card--vertical-aligned msds-generic-card--dark-theme msds-generic-card--svg">
<a href="#" class="msds-generic-card--link">
<div class="msds-generic-card__frame embed-responsive embed-responsive-2by1 msds-bg-gray-gradient-1">
<div class="msds-generic-card__frame-image embed-responsive-item msds-no-backup"></div>
</div>
<div class="msds-generic-card__body">
<h3 class="msds-generic-card__body-heading">
Headline lorem ipsum
</h3>
<p class="msds-generic-card__body-description">
Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
</p>
</div>
</a>
</div>
</div>
</div>Generic Card Default
Below is an example of the default Generic Card
<div class="row card-row">
<div class="col-12 col-md-4">
<div class="msds-generic-card msds-generic-card--vertical-aligned">
<a href="#" class="msds-generic-card--link">
<div class="msds-generic-card__frame embed-responsive embed-responsive-2by1">
<img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
alt="Card image">
</div>
<div class="msds-generic-card__body">
<h3 class="msds-generic-card__body-heading">
Headline lorem ipsum
</h3>
<p class="msds-generic-card__body-description">
Malesuada vestibulum morbi aliquam commodo. Rhoncus id semper pellentesque. Nibh conseqtetuer eros nullam.
</p>
</div>
</a>
</div>
</div>
</div>
Generic Media Card
Generic Media Cards have two different options, the first option is the default Generic Media card. The second option displays the media type of the generic card.
Default Generic Media Card
Below we have an example of the default Generic Media Card
<div class="row card-row">
<div class="col-12 col-md-4">
<div class="msds-generic-card msds-generic-card--media msds-generic-card--vertical-aligned">
<a href="#" class="msds-generic-card--link">
<div class="msds-generic-card__frame embed-responsive embed-responsive-16by9">
<img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
alt="Card image">
</div>
<div class="msds-generic-card__body">
<p class="msds-generic-card__body-text-above-headline">
MIPS 2020
</p>
<div class="msds-generic-card__body-heading">
Orchestration - The Future of Open Platforms lorem ipsum dolorem sit malesuada
</div>
</div>
</a>
<div class="msds-generic-card__media-info">
<div class="msds-generic-card__media-type">
<svg class="msds-generic-card__media-icon">
<use href="../../../msds-spritemap.svg#article" />
</svg>
Article
</div>
<div class="msds-generic-card__media-duration">
<svg class="msds-generic-card__media-icon">
<use href="../../../msds-spritemap.svg#clock" />
</svg>
6 min. read
</div>
</div>
</div>
</div>
</div>Generic Media Card
Generic Media Cards have two different options, the first option is the default Generic Media card. The second option displays the media type of the generic card.
Generic Media Card With Media Types
Below we have an example of the Generic Media Card with a floating icon to display the media card type
<div class="row card-row">
<div class="col-12 col-md-4">
<div class="msds-generic-card msds-generic-card--media">
<a href="#" class="msds-generic-card--link">
<div class="msds-generic-card__frame embed-responsive embed-responsive-16by9">
<div class="msds-generic-card__media-container">
<div class="msds-generic-card__floating-icon-container">
<svg class="msds-generic-card__floating-icon">
<use class="msds-generic-card__floating-icon"
href="../../../msds-spritemap.svg#play" />
</svg>
</div>
</div>
<img class="msds-generic-card__frame-image embed-responsive-item" src=../../../src/demo-img/xprotect.jpg
alt="Card image">
</div>
<div class="msds-generic-card__body">
<p class="msds-generic-card__body-text-above-headline">
MIPS 2020
</p>
<div class="msds-generic-card__body-heading">
Orchestration - The Future of Open Platforms lorem ipsum dolorem sit malesuada
</div>
</div>
</a>
<div class="msds-generic-card__media-info">
<div class="msds-generic-card__media-type">
<svg class="msds-generic-card__media-icon">
<use href="../../../msds-spritemap.svg#article" />
</svg>
Article
</div>
<div class="msds-generic-card__media-duration">
<svg class="msds-generic-card__media-icon">
<use href="../../../msds-spritemap.svg#clock" />
</svg>
6 min. read
</div>
</div>
</div>
</div>
</div>