Styleguide | Pfizer Medical Information

Colors

@blue:              #006da3;
@blue-dark:         #001d39;
@blue-light:        #64cbed;
@blue-lighter:      #c5ecf9;
@brown:             #b85600;
@purple:            #371c49;
@blue-gradient:     #001d39 - #005583;
@red:               #ff0000;
@green:             #6ea831;

Grid system

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options.

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns may be immediate children of rows.
Predefined grid classes like .row and .col-sm-4 are available for quickly making grid layouts.
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.
Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-sm-4.
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-sm-* class to an element will not only affect its styling on small devices but also on medium devices if a .col-md-* class is not present.

Look to the examples for applying these principles to your code.

Media queries

We use the following media queries to create the key breakpoints in our grid system.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Container width	None (auto)	750px	970px	1130px
Class prefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# of columns	12
Column width	Auto	~62px	~81px	~94px
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Offsets	Yes
Column ordering	Yes

Example: Stacked-to-horizontal

Using a single set of .col-sm-* grid classes, you can create a basic grid system that starts out stacked on mobile devices before becoming horizontal on tablet (small) devices. Place grid columns in any .row.

.col-sm-1

.col-sm-3

.col-sm-4

.col-sm-6

.col-sm-4

.col-sm-8

.col-sm-4

.col-sm-3

.col-sm-9

.col-sm-3

<div class="row">
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
  <div class="col-sm-1">.col-sm-1</div>
</div>
<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>
<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm-6">.col-sm-6</div>
  <div class="col-sm-6">.col-sm-6</div>
</div>
<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>
<div class="row">
  <div class="col-sm-8">.col-sm-8</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-9">.col-sm-9</div>
</div>
<div class="row">
  <div class="col-sm-9">.col-sm-9</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

Typography

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

h1. Heading	44px regular -1px letter spacing
h2. Heading	40px regular -1px letter spacing
h3. Heading	30px regular -0.5px letter spacing
h4. Heading	26px bold
h5. Heading	18px regular
h6. Heading	16px regular

            <h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>

Body copy

Global default font-size is 18px, with a line-height of 1.445 (26px). This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (13px by default).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Default link

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

<a href="#">Link</a>

Buttons Styles

Primary

Secondary

Info

Arrow
Arrow light

<a class="btn btn-primary" href="#">Primary</a>

<a class="btn btn-secondary" href="#">Secondary</a>

<a class="btn btn-info" href="#">Info</a>

<a class="btn-arrow" href="#">Arrow</a>

<a class="btn-arrow-light" href="#">Arrow light</a>

Lists

Unordered

A list of items in which the order does not explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul>
  <li>...</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ol>
  <li>...</li>
</ol>

Tables

Header	Header
Content	Content
Content	Content

<table>
  <tr>
    <th>
      Header
    </th>
    <th>
      Header
    </th>
  </tr>
  <tr>
    <td>
      Content
    </td>
    <td>
      Content
    </td>
  </tr>
  <tr>
    <td>
      Content
    </td>
    <td>
      Content
    </td>
  </tr>
</table>

Available icons

icon-arrow-circle-left
icon-arrow-circle-right
icon-arrow-circle-down
icon-arrow-right
icon-phone
icon-chat
icon-email
icon-thumbs-up
icon-thumbs-down
icon-view
icon-download
icon-notification
icon-resources
icon-clinical-trials
icon-patient-assist
icon-search
icon-url
icon-medical-shield
icon-medical-snake
icon-stethoscope

How to use

All icons require individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

Don't mix with other components

Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.

Only for use on empty elements

Icon classes should only be used on elements that contain no text content and have no child elements.

Accessible icons

Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters. To avoid unintended and confusing output in screen readers (particularly when icons are used purely for decoration), we hide them with the aria-hidden="true" attribute.

If you're using an icon to convey meaning (rather than only as a decorative element), ensure that this meaning is also conveyed to assistive technologies – for instance, include additional content, visually hidden with the .sr-only class.

If you're creating controls with no other text (such as a <button> that only contains an icon), you should always provide alternative content to identify the purpose of the control, so that it will make sense to users of assistive technologies. In this case, you could add an aria-label attribute on the control itself.

<span class="icon-arrow-circle-left" aria-hidden="true"></span>

Form controls

Text input

<input type="text" class="form-control" placeholder="Input Text">

Textarea

<textarea class="form-control" rows="3"></textarea>

Select

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Radios

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    <span></span>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    <span></span>
    Option two can be something else and selecting it will deselect other options
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
    <span></span>
    Option three
  </label>
</div>

Checkboxes

<div class="checkbox">
  <label>
    <input type="checkbox" value="" checked="checked">
    <span></span>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="">
    <span></span>
    Option two
  </label>
</div>

Didn’t find what you were looking for? Contact us.

MI Digital Assistant

To interact with the Medical Information Digital Assistant click here.

Call (800) 438-1985

Contact Pfizer Medical Information to speak with a professional regarding your medical question on a Pfizer prescription product: (800) 438-1985

Didn’t find what you were looking for? Contact us.

MI Digital Assistant

Chat online with Pfizer Medical Information regarding your inquiry on a Pfizer medicine.

Call 800-438-1985^*

*Contact Medical Information.

Medical Inquiry

Submit a medical question for Pfizer prescription products.

Call 800-438-1985^*

Connect with Pfizer Medical Information regarding your medical question.

MI Digital Assistant

Chat online with Pfizer Medical Information regarding your inquiry on a Pfizer medicine.

Pfizer Medical Information Medical Inquiry Icon

Submit a medical question on a Pfizer prescription product

The submission will be reviewed during our standard business hours.

Click Here

To report an adverse event related to Pfizer-BioNTech COVID-19 Vaccine (also known as COMIRNATY®, COVID-19 mRNA, Vaccine BNT162b2 or BNT162) or Pfizer COVID-19 Treatment (also known as PAXLOVID™ (nirmatrelvir tablets; ritonavir tablets)), and you are not part of a clinical trial* for this product, click the link below to submit your information:

Pfizer Safety Reporting Site

*If you are involved in a clinical trial for either product, adverse events should be reported to your coordinating study site.

If you cannot use the above website or would like to report an adverse event related to a different Pfizer product, please call Pfizer Safety at (800) 438-1985.

FDA Medwatch

You may also contact the U.S. Food and Drug Administration (FDA) directly to report adverse events or product quality concerns either online at www.fda.gov/medwatch or by calling (800)-332-1088.