Digital Design System
Solution Cards
The solution cards are used everywhere on the website to link between pages and demo optional solutions within Milestone Systems
Below you will find the different definitions and options to create your solution cards
Table of contents
Overview
Global Definition
Each solution card is based on a global CSS class called “msds-solution-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 4 types of solution cards:
- The default Solution Cards
- Solution Cards with optional solution badges
- Solution Cards without a certification badges
Hardware & software
VisionLabs Face Recognition Plug-in
By xPrime
Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
Hardware & software
VisionLabs Face Recognition Plug-in
By xPrime
Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
Hardware & software
VisionLabs Face Recognition Plug-in
By xPrime
Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
Sizes
Solution Cards have two different sizes
Hardware & software
VisionLabs Face Recognition Plug-in
By xPrime
Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
Hardware & software
VisionLabs Face Recognition Plug-in
By xPrime
Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
Large Solution Cards
When using large solution cards, make use of the bootstrap column col-md-4.
Hardware & software
VisionLabs Face Recognition Plug-in
By xPrime
Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
<div class="container">
<div class="row card-row">
<div class="col-12 col-md-4">
<div class="msds-solution-card">
<div class="msds-solution-card__header">
<div class="msds-solution-card__header-logo-container">
<img src=" ../../../src/demo-img/visionlabs.jpg" alt="solution card image"
class="msds-solution-card__header-logo-container-logo">
</div>
<div class="msds-solution-card__header-tag-container">
<div class="msds-tag msds-bg-dusty-green msds-text-white">
<div class="msds-msds-tag-text msds-text-body-3-bold text-nowrap">Hardware & software</div>
</div>
</div>
<h3 class="msds-solution-card__header-headline msds-text-header-4">
VisionLabs Face Recognition Plug-in
</h3>
</div>
<div class="msds-solution-card__body">
<div class="msds-solution-card__body-headline">
By xPrime
</div>
<p class="msds-solution-card__body-description ">
Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
</p>
</div>
<div class="msds-solution-card__footer">
<div class="msds-solution-card__badge">
<div class="msds-solution-card__badge-icon-container msds-icon-certification msds-icon-certification--certified">
<svg class="msds-icon"><use href="../../../msds-spritemap.svg#checkmark" /></svg>
</div>
<span class="msds-solution-card__badge-text">Milestone Certified</span>
</div>
<div class="msds-solution-card__footer-buttons">
<div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8">
GET IN TOUCH
</div>
<div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue">
EXPLORE
</div>
</div>
</div>
</div>
</div>
</div>
</div>Small Solution Cards
When using small solution cards, make use of the bootstrap column col-md-3.
Hardware & software
VisionLabs Face Recognition Plug-in
By xPrime
Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
<div class="container">
<div class="row card-row">
<div class="col-12 col-md-3">
<div class="msds-solution-card">
<div class="msds-solution-card__header">
<div class="msds-solution-card__header-logo-container">
<img src=" ../../../src/demo-img/visionlabs.jpg" alt="solution card image"
class="msds-solution-card__header-logo-container-logo">
</div>
<div class="msds-solution-card__header-tag-container">
<div class="msds-tag msds-bg-dusty-green msds-text-white">
<div class="msds-msds-tag-text msds-text-body-3-bold text-nowrap">Hardware & software</div>
</div>
</div>
<h3 class="msds-solution-card__header-headline msds-text-header-4">
VisionLabs Face Recognition Plug-in
</h3>
</div>
<div class="msds-solution-card__body">
<div class="msds-solution-card__body-headline">
By xPrime
</div>
<p class="msds-solution-card__body-description ">
Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
</p>
</div>
<div class="msds-solution-card__footer">
<div class="msds-solution-card__badge">
<div class="msds-solution-card__badge-icon-container msds-icon-certification msds-icon-certification--certified">
<svg class="msds-icon"><use href="../../../msds-spritemap.svg#checkmark" /></svg>
</div>
<span class="msds-solution-card__badge-text">Milestone Certified</span>
</div>
<div class="msds-solution-card__footer-buttons">
<div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8">
GET IN TOUCH
</div>
<div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue">
EXPLORE
</div>
</div>
</div>
</div>
</div>
</div>
</div>Solution Card Layouts
Below are the different Solution Card layouts
Solution Card Default
Below is an example of the default Solution Card
Hardware & software
VisionLabs Face Recognition Plug-in
By xPrime
Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
<div class="container">
<div class="row card-row">
<div class="col-12 col-md-4">
<div class="msds-solution-card">
<div class="msds-solution-card__header">
<div class="msds-solution-card__header-logo-container">
<img src=" ../../../src/demo-img/visionlabs.jpg" alt="solution card image"
class="msds-solution-card__header-logo-container-logo">
</div>
<div class="msds-solution-card__header-tag-container">
<div class="msds-tag msds-bg-dusty-green msds-text-white">
<div class="msds-msds-tag-text msds-text-body-3-bold text-nowrap">Hardware & software</div>
</div>
</div>
<h3 class="msds-solution-card__header-headline msds-text-header-4">
VisionLabs Face Recognition Plug-in
</h3>
</div>
<div class="msds-solution-card__body">
<div class="msds-solution-card__body-headline">
By xPrime
</div>
<p class="msds-solution-card__body-description ">
Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
</p>
</div>
<div class="msds-solution-card__footer">
<div class="msds-solution-card__badge">
<div class="msds-solution-card__badge-icon-container msds-icon-certification msds-icon-certification--certified">
<svg class="msds-icon"><use href="../../../msds-spritemap.svg#checkmark" /></svg>
</div>
<span class="msds-solution-card__badge-text">Milestone Certified</span>
</div>
<div class="msds-solution-card__footer-buttons">
<div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8">
GET IN TOUCH
</div>
<div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue">
EXPLORE
</div>
</div>
</div>
</div>
</div>
</div>
</div>Solution Cards With Optional Solution Badges
Solution Cards can have option solution badges
Hardware & software
VisionLabs Face Recognition Plug-in
By xPrime
Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
Milestone Certified
Milestone Certified
<div class="container">
<div class="col-12 col-md-4">
<div class="msds-solution-card">
<div class="msds-solution-card__header">
<div class="msds-solution-card__header-logo-container">
<img src=" ../../../src/demo-img/visionlabs.jpg" alt="solution card image"
class="msds-solution-card__header-logo-container-logo">
</div>
<div class="msds-solution-card__header-tag-container">
<div class="msds-tag msds-bg-dusty-green msds-text-white">
<div class="msds-msds-tag-text msds-text-body-3-bold text-nowrap">Hardware & software</div>
</div>
</div>
<h3 class="msds-solution-card__header-headline msds-text-header-4">
VisionLabs Face Recognition Plug-in
</h3>
</div>
<div class="msds-solution-card__body">
<div class="msds-solution-card__body-headline">
By xPrime
</div>
<p class="msds-solution-card__body-description ">
Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
</p>
<div class="msds-solution-card__badge">
<div class="msds-solution-card__badge-icon-container">
<svg class="msds-icon msds-text-gray-9">
<use href="../../../msds-spritemap.svg#certification" />
</svg>
</div>
<span class="msds-solution-card__badge-text">Milestone Certified</span>
</div>
<div class="msds-solution-card__badge">
<div class="msds-solution-card__badge-icon-container">
<svg class="msds-icon msds-text-gray-9">
<use href="../../../msds-spritemap.svg#location" />
</svg>
</div>
<span class="msds-solution-card__badge-text">Milestone Certified</span>
</div>
</div>
<div class="msds-solution-card__footer">
<div class="msds-solution-card__footer-buttons">
<div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8">
GET IN TOUCH
</div>
<div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue">
EXPLORE
</div>
</div>
</div>
</div>
</div>
</div>Solution Cards With Optional Certification Badges
Solution Cards can have option certification badges
Hardware & software
VisionLabs Face Recognition Plug-in
By xPrime
Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
Milestone Certified
Milestone Certified
<div class="container">
<div class="col-12 col-md-4">
<div class="msds-solution-card">
<div class="msds-solution-card__header">
<div class="msds-solution-card__header-logo-container">
<img src=" ../../../src/demo-img/visionlabs.jpg" alt="solution card image"
class="msds-solution-card__header-logo-container-logo">
</div>
<div class="msds-solution-card__header-tag-container">
<div class="msds-tag msds-bg-dusty-green msds-text-white">
<div class="msds-msds-tag-text msds-text-body-3-bold text-nowrap">Hardware & software</div>
</div>
</div>
<h3 class="msds-solution-card__header-headline msds-text-header-4">
VisionLabs Face Recognition Plug-in
</h3>
</div>
<div class="msds-solution-card__body">
<div class="msds-solution-card__body-headline">
By xPrime
</div>
<p class="msds-solution-card__body-description ">
Prevent Vandalism | Prevent Vandalism | Control access to restricted areas
</p>
<div class="msds-solution-card__badge">
<div class="msds-solution-card__badge-icon-container">
<svg class="msds-icon msds-text-gray-9">
<use href="../../../msds-spritemap.svg#certification" />
</svg>
</div>
<span class="msds-solution-card__badge-text">Milestone Certified</span>
</div>
<div class="msds-solution-card__badge">
<div class="msds-solution-card__badge-icon-container">
<svg class="msds-icon msds-text-gray-9">
<use href="../../../msds-spritemap.svg#location" />
</svg>
</div>
<span class="msds-solution-card__badge-text">Milestone Certified</span>
</div>
</div>
<div class="msds-solution-card__footer">
<div class="msds-solution-card__footer-buttons">
<div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-gray-8">
GET IN TOUCH
</div>
<div class="msds-solution-card__footer-buttons-button msds-text-header-5 msds-text-clear-blue">
EXPLORE
</div>
</div>
</div>
</div>
</div>
</div>