Style Guide 2022

← Web Content Guidelines

Typography

Body Copy

This is the default body copy text style in use throughout the Duke University Libraries website. Here is a longer block of paragraph text to demonstrate how lines of text are spaced vertically. This text is encoded in <p> tags to indicate it is a paragraph. Some additional characteristics:

  • Font Family:  
  • Font Size:  
  • Color:  
  • Line Height:  

Type Variations

Strong text — <strong>
Italic text — <em>
Smaller text — <small>
Muted text — .text-muted
Highlighted text - <mark>
Bold text — .font-weight-bold
Semibold text — .font-weight-semibold

Headings Docs »

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Blockquotes Docs »

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lists Docs »

A plain <ul> with no class or id will display with a stylized bullet. You can add other list classes and still get a stylized bullet by using <ul class="list-styled">. Most of these are DUL-custom styles.

Unordered

<ul>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

Ordered

<ol>
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit

Unstyled

<ul class="list-unstyled">
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

Outdent

<ul class="outdent list-unstyled">
  • Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Integer lorem at massa. Facilisis in pretium nisl aliquet. Nulla volutpat aliquam velit.
  • Consectetur adipiscing elit
  • Integer lorem at massa

Spacing: None

<ul class="spacing-none list-styled">
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

Spacing: Small

<ul class="spacing-sm list-styled">
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

Spacing: Md

<ul class="spacing-md list-styled">
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

Spacing: Lg

<ul class="spacing-lg list-styled">
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

Inline

<ul class="list-inline">
  <li class="list-inline-item">...
  • Lorem ipsum
  • Consectetur
  • Integer lorem
  • Facilisis
  • Nulla volutpat

Inline Styled

<ul class="list-inline list-styled">
  <li class="list-inline-item">...
  • Lorem ipsum
  • Consectetur
  • Integer lorem
  • Facilisis
  • Nulla volutpat

Columns-2

<ul class="list-styled columns-2">

Columns-3

<ul class="list-styled columns-3">

Columns-4

<ul class="list-styled columns-4">

Description List Docs »

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Description List Horizontal Docs »

<dl class="row">
  <dt class="col-sm-3">...</dt>
  <dd class="col-sm-9">...</dd>
</dl>

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<ul class="pdflinks list-unstyled">

Buttons Docs »

My Button
.btn-primary
My Button
.btn-secondary
My Button
.btn-success
My Button
.btn-info
My Button
.btn-warning
My Button
.btn-danger
My Button
.btn-outline-primary
My Button
.btn-outline-secondary
My Button
.btn-outline-success
My Button
.btn-outline-info
My Button
.btn-outline-warning
My Button
.btn-outline-danger
My Button
.btn-light
My Button
.btn-dark
My Button
.btn-outline-light
My Button
.btn-outline-dark
My Button
.btn-link

Button Sizes & Variants Docs »

My Button
.btn-lg
My Button
{default}
My Button
.btn-sm
Action Another action Something else here
Split Button
Action Another action Something else here
 
Separated link

Icons Docs »

Our DUL Drupal theme uses the FontAwesome 5 Free icon library. Insert an icon using HTML (easiest), or by using CSS pseudo-elements (advanced).

Example HTML:
<i class="fas fa-book-open">&nbsp;</i>.

Examples

Note that each has two classes. fas, far, & fab correspond to solid, regular, or brand icons.

 
fas fa-book-open
 
fas fa-bookmark text-danger
 
fas fa-check-circle text-success
 
fas fa-user-graduate
 
far fa-comment
 
fab fa-apple
 
fas fa-arrow-up
 
far fa-closed-captioning

Browse all available icons

Tables Docs »

<table class="table">
# Column B Column C Column D
1 Value B1 Value C1 Value D1
2 Value B2 Value C2 Value D2
3 Value BC3 Value D3
<table class="table table-striped">
# Column B Column C Column D
1 Value B1 Value C1 Value D1
2 Value B2 Value C2 Value D2
3 Value BC3 Value D3
<table class="table table-bordered">
# Column B Column C Column D
1 Value B1 Value C1 Value D1
2 Value B2 Value C2 Value D2
3 Value BC3 Value D3
<table class="table table-sm">
# Column B Column C Column D
1 Value B1 Value C1 Value D1
2 Value B2 Value C2 Value D2
3 Value BC3 Value D3
<table class="table table-bordered table-sm table-striped table-hover">
# Column B Column C Column D
1 Value B1 Value C1 Value D1
2 Value B2 Value C2 Value D2
3 Value BC3 Value D3
<table class="table table-borderless">
# Column B Column C Column D
1 Value B1 Value C1 Value D1
2 Value B2 Value C2 Value D2
3 Value BC3 Value D3

Alerts Docs »

<div class="alert alert-primary" role="alert">

Colors

Colors must be used responsibly so that text is accessible, complying with WCAG2.1 Level AA guidelines. Text must have a contrast ratio of at least 4.5:1 compared to its background (3:1 for large-scale text).

Duke Brand Guide Colors

Wherever possible, we should use these colors from the Duke Brand Guide. Consult the guide's Color Accessibility grid to ensure proper usage.

 

DUL Colors

These variables are used in buttons, alerts, and other Bootstrap elements.

 

Color Variants

You may need to darken or lighten a color, especially to get it to contrast enough with its background. In these cases, use our custom Sass functions for tint and shade.

Tint (adds white)

background-color: tint($dul-masthead-blue, 10%);
 

Shade (adds black)

background-color: shade($dul-masthead-blue, 10%);
 

Tabs Docs »

Vertical Tabs (Search Resources)

One...
Two...
Three...

Horizontal Tabs

Here is my home tab content...
And here is my profile tab content...
Finally, here is my Contact tab content...

Cards Docs »

Card image cap
Image Card

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
.card
 .card-img-body
 .card-body
Card With Header

Card Title Here

With supporting text below as a natural lead-in to additional content.

.card
 .card-header
 .card-body
List Group
.card
 .card-header
 .list-group.list-group-flush
Primary Card
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

.card.bg-primary
Warning Card

Some quick example text to build on the card title and make up the bulk of the card's content.

.card.bg-warning
Info Card

Some quick example text to build on the card title and make up the bulk of the card's content.

.card.bg-info

Images

Uploading to Media Library

In the WYSIWYG editor, place your cursor where you'd like the image to render and click the Insert from Media Library button. Upload your (large) image file. Media Library will create smaller derivative sizes for you.

Insert from Media Library button in text editor

 

Provide alt text for accessibility. Click Save and Insert.

Interface to add alt text to a Media Library image

 

Drupal will create a <drupal-media>...</drupal-media> tag in the page markup.

Image Display Options

Click the Edit Media button to customize how the image appears. For legacy images, double-click the image.

Button to Edit Media

 

Edit media modal dialog interface

 

Choose a size for the image (under Display).

Choose image size interface

 

Set image alignment and caption options per below. Legacy images (not using Media Library) may also use these options.

Image Alignment

None data-align=""
Perkins Library tower

Praesent a viverra massa. Mauris nibh augue, mattis eget dolor vel, semper odio. Cras interdum eget ipsum dapibus vehicula. In ut laoreet felis. Sed ac elit mollis, suscipit magna a, volutpat eros. Donec enim libero, consequat at metus eget, eleifend egestas nunc. Integer malesuada mi nibh, quis interdum nisl laoreet a.

Left data-align="left"
Perkins Library tower

Praesent a viverra massa. Mauris nibh augue, mattis eget dolor vel, semper odio. Cras interdum eget ipsum dapibus vehicula. In ut laoreet felis. Sed ac elit mollis, suscipit magna a, volutpat eros. Donec enim libero, consequat at metus eget, eleifend egestas nunc. Integer malesuada mi nibh, quis interdum nisl laoreet a.

Center data-align="center"
Perkins Library tower

Praesent a viverra massa. Mauris nibh augue, mattis eget dolor vel, semper odio. Cras interdum eget ipsum dapibus vehicula. In ut laoreet felis. Sed ac elit mollis, suscipit magna a, volutpat eros. Donec enim libero, consequat at metus eget, eleifend egestas nunc. Integer malesuada mi nibh, quis interdum nisl laoreet a.

Right data-align="right"
Perkins Library tower

Praesent a viverra massa. Mauris nibh augue, mattis eget dolor vel, semper odio. Cras interdum eget ipsum dapibus vehicula. In ut laoreet felis. Sed ac elit mollis, suscipit magna a, volutpat eros. Donec enim libero, consequat at metus eget, eleifend egestas nunc. Integer malesuada mi nibh, quis interdum nisl laoreet a.

Image Captions data-caption="Here is my caption."

Check Captions in the Edit Media options.

Edit Image dialog with Caption checked

 

Click the yellow box under the image to enter a caption.

UI for entering an image caption

 

Caption Under Left-Aligned Image data-align="left"
Bostock Library tower
Here is a caption that describes this photograph.

Praesent a viverra massa. Mauris nibh augue, mattis eget dolor vel, semper odio. Cras interdum eget ipsum dapibus vehicula. In ut laoreet felis. Sed ac elit mollis, suscipit magna a, volutpat eros. Donec enim libero, consequat at metus eget, eleifend egestas nunc. Integer malesuada mi nibh, quis interdum nisl laoreet a.

Caption Under Center-Aligned Image data-align="center"
Bostock Library tower
Here is a caption that describes this photograph.

Praesent a viverra massa. Mauris nibh augue, mattis eget dolor vel, semper odio. Cras interdum eget ipsum dapibus vehicula. In ut laoreet felis. Sed ac elit mollis, suscipit magna a, volutpat eros. Donec enim libero, consequat at metus eget, eleifend egestas nunc. Integer malesuada mi nibh, quis interdum nisl laoreet a.

Caption Under Right-Aligned Image data-align="right"
Bostock Library tower
Here is a caption that describes this photograph.

Praesent a viverra massa. Mauris nibh augue, mattis eget dolor vel, semper odio. Cras interdum eget ipsum dapibus vehicula. In ut laoreet felis. Sed ac elit mollis, suscipit magna a, volutpat eros. Donec enim libero, consequat at metus eget, eleifend egestas nunc. Integer malesuada mi nibh, quis interdum nisl laoreet a.

Miscellaneous

Tooltips Docs »

<button data-toggle="tooltip" title="the tip">...</button>

Popovers Docs »

<button data-toggle="popover" title="the text">...</button>

Accordions Docs »

Content for group one. Ensure the entire accordion has an id, e.g., accordionExample. Open the other panes for more tips.
Content for group two. Each collapsable element in the accordion has to refer to the accordion's ID, e.g., data-parent="accordionExample", so only one part will be open at a time.
Content for group three. Clickable titles must have these attributes: data-toggle, data-target, aria-controls, aria-expanded. Collapsable elements must have: class="collapse", aria-labelledby, data-parent.

Utility Classes Docs »

Use HTML classes instead of CSS for common layout needs.

Example spacing classes:

  • m-0 - no margin
  • p-0 - no padding
  • mt-1 - a little top margin
  • mt-5 - a big top margin
  • pl-3 - some left padding

Example display classes:

  • d-none - don't display
  • d-lg-block - display as block for large screens
  • d-inline - display inline
  • d-none d-xl-block - visible only on xl screens

Striped Box

<div class="striped-back">...</div>
Hello, I am in a shaded striped box.

Call Box

<a class="callbox">...</div>
Call to Action link as a pseudo-button.

More Info

See Bootstrap 4's markup reference for more code and examples.

Our Duke Libraries Drupal site uses a custom theme called Dulcet, based on the Bootstrap-enabled Radix Drupal base theme. We layer in additional base styles from Bootswatch.com's Cosmo Theme. Styles are written as SCSS files, compiled to CSS via Webpack & Yarn.