@ms/medical-solutions-theme
How to use the Medical Solutions theme styles in your react project.

Add to package.json, use the most current version in Artifacts:
@ms/medical-solutions-theme": "1.1.XXXXX

Add a CSS file to your app and import into the App.tsx root:
import './styles/app-styles.css';

In your app-styles.scss file, add:
@import '~@ms/medical-solutions-theme/dist/styles/main.css';

Use Bootstrap classes for quickly adding padding, margins, grids, badges, nav menus, breakpoints, positioning, display state, flex layouts to your custom components.

The SVG version has support for dark mode!

Add this to the head:

<link rel="apple-touch-icon" sizes="18ƀ" href="{ YOUR APP URL }/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32×32" href="{ YOUR APP URL }/favicon-32×32.png"><link rel="icon" type="image/png" sizes="16×16" href="{ YOUR APP URL }/favicon-16×16.png"><link rel="manifest" href="{ YOUR APP URL }/site.webmanifest"><link rel="mask-icon" href="{ YOUR APP URL }/safari-pinned-tab.svg" color="#263349"><meta name="msapplication-TileColor" content="#ffffff"><meta name="theme-color" content="#ffffff"><link rel="icon" href="{ YOUR APP URL }/favicon.svg">

Medical Solutions Color Palette

SCSS Variables
$colors: (
"white": #fff,
"black": #000,
"green": #61a60e,
"lime": #b2cc11,
"purple": #8e4396,
"blue": #0077c0,
"teal": #00b9b0,
"orange": #f68d15,
"gray-extra-light": #c9ccd1,
"gray-light": #e9eaec,
"gray-medium": #546078,
"gray-dark": #263349
);

$theme-colors: (
primary: color("gray-dark"),
secondary: color("purple"),
success: color("green"),
danger: color("orange"),
warning: color("blue"),
info: color("teal")
);

Background Color Classes (Bootstrap naming)

Background Color Classes (MedSol naming)

Text Color Classes

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

Background Gradients

Button Gradients
Button gradients are slightly different so text is more readable when placed over it.

Text Gradient

.theme-text-gradient .text-gradient-blue

.theme-text-gradient .text-gradient-orange

.theme-text-gradient .text-gradient-green

Medical Solutions uses Montserrat in various weights and Caveat.

Montserrat 300 / Light

Montserrat 400 / Regular

Montserrat 400 / Italic

Montserrat 500 / Medium

Montserrat 600 / Semi-bold

Caveat

Import from Google Fonts
@import url("https://fonts.googleapis.com/css?family=Caveat|Montserrat:300,400,400i,500,600&display=swap");

Heading styles

.h-hero Hero heading

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

.h-hand Handwritten font

Font Utility Classes
.font-montserrat {
font-family: "Montserrat", sans-serif;
}

.font-weight-semibold,
.font-weight-600 {
font-weight: $font-weight-semibold;
}

This icon library is a utility icon font that is used in the website design. Use classes from the documentation anywhere.

Download a zip of this icon font family below. You can make edits to it using https://icomoon.io/

Add to your project by first importing the font icon:
@font-face {
font-family: 'msicomoon';
src: url('~@ms/medical-solutions-theme/dist/fonts/msicomoon/fonts/msicomoon.eot?49h3q1');
src: url('~@ms/medical-solutions-theme/dist/fonts/msicomoon/fonts/msicomoon.eot?49h3q1#iefix') format('embedded-opentype'),
url('~@ms/medical-solutions-theme/dist/fonts/msicomoon/fonts/msicomoon.ttf?49h3q1') format('truetype'),
url('~@ms/medical-solutions-theme/dist/fonts/msicomoon/fonts/msicomoon.woff?49h3q1') format('woff'),
url('~@ms/medical-solutions-theme/dist/fonts/msicomoon/fonts/msicomoon.svg?49h3q1#msicomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}

Light

.btn-transparent

.btn-gray-medium

.btn-sm

.btn-lg

<button class="btn btn-primary rounded-pill hover-highlight" type="button">Primary</button>

Email Input

<div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"><small id="emailHelp" class="form-text text-muted">We’ll never share your email with anyone else.</small></div>

Checkbox

<div class="custom-control custom-checkbox"><input id="customCheck1" class="custom-control-input" type="checkbox" /><label class="custom-control-label" for="customCheck1">Check this custom checkbox</label></div><br />

Radio Buttons

<div class="custom-control custom-radio mb-3"><input id="customRadio1" class="custom-control-input" name="customRadio" type="radio" /><label class="custom-control-label" for="customRadio1">Toggle this custom radio</label></div><div class="custom-control custom-radio"><input id="customRadio2" class="custom-control-input" name="customRadio" type="radio" /><label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label></div>

Select
Open this select menuOneTwoThree

<select class="custom-select"><option selected="selected">Open this select menu</option><option value="1">One</option><option value="2">Two</option><option value="3">Three</option></select>

File Input

<div class="custom-file"><input id="customFile" class="custom-file-input" type="file" /><label class="custom-file-label" for="customFile">Choose file</label></div>

Toggle between color palettes by adding classes to the body or a parent element. The theme then changes items wrapped.

Classes:
theme-orange
theme-blue
theme-green

Blog Card

<div class="card bg-gray-100 rounded-lg h-100"><div class="card-img-top" style="background-image: url(‘https://www.medicalsolutions.com/wp-content/uploads/2020/09/Content-Card-Blog.png’);"></div><div class="card-body"><span class="card-subtitle card-subtitle-top text-muted d-block font-weight-bold">Client Services, Hospital Staffing, Hospitals</span><h2 class="h5 card-title mb-0"><a class="stretched-link" href="https://www.medicalsolutions.com/news/client-services/benefits-of-travel-nurses-for-flexible-staffing-needs/">Benefits of Travel Nurses for Flexible Staffing Needs</a></h2></div><div class="card-footer text-muted font-weight-500">September 7, 2020</div></div>

Forms

<div class="card card-form bg-white rounded-lg"><div class="card-body"><form><h3 class="h5 mt-0">Subscribe to the Medical Solutions Blog</h3>Get updates sent to your inbox<label></label><select class="form-control large"><option value="">Are you a Client or a Traveler?</option><option value="Client">Client</option><option value="Traveler">Traveler</option></select></form></div></div><br />

Large Link

<div class="bg-dark p-5"><a class="card card-url border-0 rounded-lg justify-content-center bg-black bg-alpha-15 h-100 text-decoration-none text-light" href="#"><span class="d-flex"><span class="w-100 align-self-center"><span class="title d-block font-weight-semibold">Workforce Solutions</span><span class="font-weight-medium mt-2 d-block">Visit our website to learn more about our workforce solutions and find the right travel nurses and allied health professionals.</span></span></span></a></div>

CTA

<div class="card card-cta h-100 color-gray-dark card-medium border-gray-light icon-lg mobile-icon-margin-sm theme-green"><div class="card-body d-flex align-items-start flex-column"><div class="icon w-100"></div><div class="mt-auto w-100"><h4 class="font-weight-bold my-0 theme-text-gradient">Healthcare Facilities</h4><p class="h4 font-weight-500 my-0">We’re keeping healthcare human. Tell us about your staffing needs.</p><button class="btn btn-lg btn-primary d-block w-100 d-lg-inline-block hover-highlight rounded-pill stretched-link mt-3 mt-lg-4">Clients</button></div></div></div>

CTA

Any questions about this job?

A great team with years of travel nursing experience. We know what it’s like and are here to answer all your questions.Contact Us

<div class="col-16 align-self-end d-none d-lg-block mt-5"><div class="card bg-gray-100 has-top-thumb rounded-lg"><div class="card-top-thumb rounded-circle"><img class="rounded-circle" src="https://www.medicalsolutions.com/wp-content/themes/medicalsolutions-theme/dist/images/contact-thumb_9451f98d.png" alt="Contact Us" /></div><div class="card-body text-center"><h2 class="h5 card-title">Any questions about this job?</h2><span class="d-block text-muted">A great team with years of travel nursing experience. We know what it’s like and are here to answer all your questions.</span><a class="btn btn-secondary rounded-pill stretched-link mt-3" href="/contact/">Contact Us</a></div></div></div>

In various mockups our designers have built upon the design system in the website to create app components. Check out different parts of the website as starting places for your building these layouts using Bootstrap classes.

Team member widgets:

About Medical Solutions

Layout and elements on the job detail page:

Travel Nursing Jobs

Blog:
Blog

Have fun and build cool stuff!