FOR MIND BODY MEDICINE AT MASSACHUSETTS GENERAL HOSPITAL

For Mind Body Medicine
at Massachusetts General Hospital

Style Guide

Large Paragraph Text

Lorum Ipsem Dolor

<p class="paragraph-large">text</p>


Medium Paragraph Text

Lorum Ipsem Dolor

<p class="paragraph-medium">text</p>


Images

<img src="x.png" class="quarter-width" >
<img src="x.png" class="half-width" >
<img src="x.png" class="full-width" >


Phone Number

617.643.055

<p class="phone-number">617.643.055</p>


Button

Join Our Network

<a class="button button-green button-rounded" href="#">Join Our Network</a>


Bottom positioned button

1. Add class “flex-content” in “Custom class” section.
2. Button code:
<a class="flex-button button button-green button-rounded" href="#">Button text</a>
3. Sometimes the first 2 steps will be sufficient for good results. However on some displays, in case the text before the button is longer, it may be covered by the button. In this case, we need to add an additional class to the last paragraph before the button:
<p class="paragraph-medium flex-text">Longer text that will not be covered by the button</p>


Header

The Relaxation Response

<h2 class=”content-header inline-content-header”>The Relaxation Response</h2>


Lists

  • Anxiety-related symptoms
  • Headaches or migraines
  • Autoimmune disorders

<ul class="content-list">
<li>Anxiety-related symptoms</li>
<li>Headaches or migraines</li>
<li>Autoimmune disorders</li>
<ul">


Large paragraph

Larger body text

<p class="paragraph-large">Larger body text</p>


Black body text

(all headings are black by default)

Black body text

<p class="font-black">Black body text</p>

Slider and Header Image Placement

Add “Custom Styles” to the slider image such as:

bg-x-25 - the focal point of the image should be at the 25% point from left of image.
bg-x-75 - the focal point of the image should be at the 75% point from left of image.
bg-x-xs-75 - the focal point of the image should be at the 75% point from left of image for extra small devices only.

See Bootstrap Grid for additional sm, md, lg and xl breakpoints.


Anchors

Be sure to add class anchor-offset to the anchor, to be sure the fixed navigation doesn’t hide the anchor point.

<a name="purchase" class="anchor-offset"></a>

Join Waitlist We will inform you when the product arrives in stock. Please leave your valid email address below.