Brand colors

• Avantor Marine Blue
  CMYK 96 54 5 27
  RGB 35 97 146
  HEX #236192
  PMS 647 C
• Avantor Dark Blue
  CMYK 90 48 0 0
  RGB 0 100 200
  HEX #0064c8
  PMS 285 C
• Avantor Bright Green
  CMYK 51 0 85 0
  RGB 0 214 73
  HEX #00d649
  PMS 2293 C
• Avantor Light Blue
  CMYK 75 0 5 0
  RGB 46 196 255
  HEX #2ec4ff
  PMS 306 C
• Avantor White
  CMYK 0 0 0 0
  RGB 255 255 255
  HEX #ffffff
  PMS

Accent colors

• Avantor Yellow
  CMYK 0 28 87 0
  RGB 255 194 59
  HEX #ffc23b
  PMS 136 C
• Avantor Violet
  CMYK 80 74 0 0
  RGB 92 65 158
  HEX #5c419e
  PMS 7670 C
• Avantor Coral
  CMYK 0 72 70 0
  RGB 244 113 91
  HEX #f4715b
  PMS 7416 C

Neutral colors

• Avantor White
  CMYK 0 0 0 0
  RGB 255 255 255
  HEX #ffffff
  PMS
• Avantor Dark Cool Gray
  CMYK 9 0 0 90
  RGB 83 86 90
  HEX #53565a
  PMS Cool Gray 11 C
• Avantor Black
  CMYK 0 0 0 100
  RGB 0 0 0
  HEX #000000
  PMS Process Black C
• Avantor Medium Cool Gray
  CMYK 13 9 10 27
  RGB 177 179 179
  HEX #b1b3b3
  PMS Cool Gray 5 C
• Avantor Cool Gray
  CMYK 5 3 5 11
  RGB 226 226 226
  HEX #e2e2e2
  PMS Cool Gray 2 C

Display Heading Level 1

Display Heading Level 2

Display Heading Level 3

Display Heading Level 4

h1. Heading Level

h2. Heading Level

h3. Heading Level

h4. Heading Level

h5. Heading Level

h6. Heading Level

h1. Small Title Heading Level

h2. Small Title Heading Level

h3. Small Title Heading Level

h4. Small Title Heading Level

h5. Small Title Heading Level

h6. Small Title Heading Level

Heading 1 with link

Heading 2 with link

Heading 3 with link

Heading 4 with link

Heading 5 with link

Heading 6 with link

Sit posidonium voluptatibus eu, qui at augue torquatos, sed te malorum periculis vituperatoribus. Iisque copiosae definiebas sed cu, liber veniam homero sed in. Usu debet nemore ex, mea vide zril commodo no, no ius pericula expetenda. Ne deleniti instructior sed, ex purto salutandi qui.

Ad eum velit eripuit. No facete iriure contentiones mel, pro ad laoreet consectetuer, eripuit aliquam te est. Eum elit duis veri te, at duo mazim noluisse. Facer iisque molestie ex cum, cum te postea saperet quaerendum, et vis unum apeirian. Nam primis atomorum posidonium cu. Ex nisl feugiat reprimique mei. Hinc feugiat volutpat in usu, duo solet tollit et.

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript^®

Superscript^®

Subscript for things like H₂O

Subscript for things like H₂O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variable element, such as x = y

P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

Lowercased text.

Uppercased text.

Capitalized text.

Term

This is the definition of the term.

Lorem mollit cillum sint irure in eu exercitation nulla laborum tempor duis proident cillum.

.text-gradient

.text-marine-blue

.text-dark-blue

.text-bright-green

.text-light-blue

.text-yellow

.text-violet

.text-coral

.text-white

.text-black

.text-black-50

.text-white-50

.text-dark-cool-gray

.text-medium-cool-gray

.text-cool-gray

Marine Blue link

Dark Blue link

Bright Green link

Light Blue link

Yellow link

Violet link

Coral link

White link

Black link

.font-size-0

.font-size-1

.font-size-2

.font-size-3

.font-size-4

.font-size-5

.font-size-6

.font-size-7

.font-size-8

Primary button

Link button

Small button

Large button

Block level button

Active state button

Striped Rows

Use .table-striped to add zebra-striping to any table row within the tbody.

Bordered Table

Add .table-bordered for borders on all sides of the table and cells.

Hoverable Rows

Add .table-hover to enable a hover state on table rows within a tbody.

Responsive Tables

Create responsive tables by adding .table-responsive to any .table to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

Bordered

Bordered Dark Cool Gray

Bordered Medium Cool Gray

Bordered Cool Gray