← Web Content Guidelines

This page demonstrates common page components and their corresponding styles. Use it for reference and to verify visuals while adjusting styles.

See Bootstrap's site for markup reference. Styles are based on Bootswatch.com style Cosmo using the Radix Drupal base theme and a custom-developed Duke Libraries theme called Dulcet. Styles are expressed as SCSS files.


Typography Docs »

Body Text

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et enim libero. Vivamus nunc velit, viverra non feugiat et, vulputate et sapien. Nunc non pharetra augue. Duis sit amet felis nisl. Sed vitae nunc feugiat, vehicula felis eu, semper dolor. Proin non eros lectus. Cras fermentum vestibulum est, quis mattis nulla semper id. Fusce et magna felis.

Sed lacinia sapien id magna sagittis porttitor. Vestibulum egestas cursus ultricies. Maecenas non turpis nec diam blandit laoreet vel eu est. Cras ac arcu mauris. Donec eget elit non turpis convallis dapibus. Proin congue nisi sapien, vel porttitor dolor convallis a. In feugiat ut ligula sit amet dignissim. Praesent porta rhoncus dui.

Headings

<h2> through <h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lead Body Copy

<p class="lead">Text</p>

This lead sentence will stand out a little.

Sed lacinia sapien id magna sagittis porttitor. Vestibulum egestas cursus ultricies. Maecenas non turpis nec diam blandit laoreet vel eu est. Cras ac arcu mauris. Donec eget elit non turpis convallis dapibus. Proin congue nisi sapien, vel porttitor dolor convallis a. In feugiat ut ligula sit amet dignissim. Praesent porta rhoncus dui.

Horizontal Rule

<hr/>

Emphasis

<p class="x-large"> This text is extra-large.</p>

<p class="large"> This text is large.</p>

<p class="small"> This text is small.</p>

<strong> This text is bold.</strong>

<em> This text is italic.</em>


<p class="text-muted"> This text is muted.

<p class="text-warning"> This is a warning.

<p class="text-danger"> This is an error message.

Blockquotes

<blockquote> <p>...</p> <small>...</small> </blockquote>

Optional <blockquote class="pull-right">

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

Someone famous Source Title

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

Someone famous Source Title

Alignment

<p class="text-left"> Left aligned text.</p>

<p class="text-center"> Center aligned text.</p>

<p class="text-right"> Right aligned text.</p>

Lists

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">.

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
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit

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">
  • Lorem ipsum
  • Consectetur
  • Integer lorem
  • Facilisis
  • Nulla volutpat

Inline Styled

<ul class="list-inline list-styled">
  • 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

<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

<dl class="dl-horizontal">
  <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.

Links

Links in Paragraphs

Text links across the site are styled with an initial color of #053482 and a hover-state color of #021738.

For page content, text links inside of a paragraph will be styled with a subtle underline using text-decoration-color: #c0cce0 and text-decoration-skip: ink;. The hover state uses #021738 for color and text-decoration-color.

Links in Lists

Links inside of list elements are not underlined by default:

However, you can assign the class underlined-li-links to a wrapper element to enable underlines:

Links in Panels and Blocks

Due to the markup that is generated by blocks and panels, it is difficult to assign our default paragraph link styles inside of these Drupal elements. If you are working with a panel or a block and would like for the links inside your paragraphs to use the underlined style, you only need to assign the class underlined-links to the wrapper to activate them. Also note that you can apply the underlined-li-links in the same fashion.


Buttons Docs »

Tables Docs »

<table class="table">
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table class="table table-striped">
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table class="table table-bordered">
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table class="table table-condensed">
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table class="table table-bordered table-condensed table-striped table-hover">
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table class="table-unstyled"> or <table border="0">
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Selecting Table Styles in the WYSIWYG

Images

Float Left (in WYSIWG)

<img class="image-left img-responsive"> Rubenstein Library

Fusce dictum ipsum non neque placerat volutpat. Phasellus molestie quis risus ut rhoncus. Morbi id varius mauris. Fusce elementum ante nec ligula dapibus, ac posuere orci fermentum. Vivamus nulla justo, faucibus non placerat in, feugiat id lacus. Vivamus commodo vulputate pharetra. Maecenas nec pharetra enim. Quisque eros mi, fermentum id posuere in, vulputate sed nunc. Donec scelerisque sapien nec enim cursus auctor. Vestibulum dolor dolor, pellentesque nec faucibus sit amet, dictum ut ipsum. Duis urna magna, convallis non felis non, feugiat iaculis purus. Ut a aliquam leo. Vivamus bibendum pellentesque quam, sit amet lobortis erat commodo mattis. Phasellus nec risus erat. Morbi vitae placerat nisl.

Float Right

<img class="image-right img-responsive"> Rubenstein Library

Fusce dictum ipsum non neque placerat volutpat. Phasellus molestie quis risus ut rhoncus. Morbi id varius mauris. Fusce elementum ante nec ligula dapibus, ac posuere orci fermentum. Vivamus nulla justo, faucibus non placerat in, feugiat id lacus. Vivamus commodo vulputate pharetra. Maecenas nec pharetra enim. Quisque eros mi, fermentum id posuere in, vulputate sed nunc. Donec scelerisque sapien nec enim cursus auctor. Vestibulum dolor dolor, pellentesque nec faucibus sit amet, dictum ut ipsum. Duis urna magna, convallis non felis non, feugiat iaculis purus. Ut a aliquam leo. Vivamus bibendum pellentesque quam, sit amet lobortis erat commodo mattis. Phasellus nec risus erat. Morbi vitae placerat nisl.

Image Center

<img class="image-center img-responsive">

Fusce dictum ipsum non neque placerat volutpat. Phasellus molestie quis risus ut rhoncus. Morbi id varius mauris. Fusce elementum ante nec ligula dapibus, ac posuere orci fermentum. Vivamus nulla justo, faucibus non placerat in, feugiat id lacus.

Rubenstein Library

Donec scelerisque sapien nec enim cursus auctor. Vestibulum dolor dolor, pellentesque nec faucibus sit amet, dictum ut ipsum. Duis urna magna, convallis non felis non, feugiat iaculis purus. Ut a aliquam leo. Vivamus bibendum pellentesque quam, sit amet lobortis erat commodo mattis.

Left Caption

Rubenstein Library

Fusce dictum ipsum non neque placerat volutpat. Phasellus molestie quis risus ut rhoncus. Morbi id varius mauris. Fusce elementum ante nec ligula dapibus, ac posuere orci fermentum. Vivamus nulla justo, faucibus non placerat in, feugiat id lacus. Vivamus commodo vulputate pharetra. Maecenas nec pharetra enim. Quisque eros mi, fermentum id posuere in, vulputate sed nunc. Donec scelerisque sapien nec enim cursus auctor. Vestibulum dolor dolor, pellentesque nec faucibus sit amet, dictum ut ipsum. Duis urna magna, convallis non felis non, feugiat iaculis purus. Ut a aliquam leo. Vivamus bibendum pellentesque quam, sit amet lobortis erat commodo mattis. Phasellus nec risus erat. Morbi vitae placerat nisl.

Right Caption

Rubenstein Library

Fusce dictum ipsum non neque placerat volutpat. Phasellus molestie quis risus ut rhoncus. Morbi id varius mauris. Fusce elementum ante nec ligula dapibus, ac posuere orci fermentum. Vivamus nulla justo, faucibus non placerat in, feugiat id lacus. Vivamus commodo vulputate pharetra. Maecenas nec pharetra enim. Quisque eros mi, fermentum id posuere in, vulputate sed nunc. Donec scelerisque sapien nec enim cursus auctor. Vestibulum dolor dolor, pellentesque nec faucibus sit amet, dictum ut ipsum. Duis urna magna, convallis non felis non, feugiat iaculis purus. Ut a aliquam leo. Vivamus bibendum pellentesque quam, sit amet lobortis erat commodo mattis. Phasellus nec risus erat. Morbi vitae placerat nisl.

Image Thumbnail

<img class="img-thumbnail">
Rubenstein Library

Lightbox Load

<a class="colorbox-load">
Rubenstein Library

Lightbox Inline w/HTML

<a class="colorbox-inline">
Rubenstein Library

Rubenstein Library

Here's some HTML with a link and some bold text. Rubenstein Library

Icons Docs »

The Dulcet theme uses icons from FontAwesome. Icons can be easily styled with CSS. How to use them in a page:

<span class="fa fa-bookmark"></span>

Navs Docs »

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.

Pagination

Indicators Docs »

Alerts Docs »

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.

Labels Docs »

Default Primary Success Warning Danger Info

Containers Docs »

Jumbotron

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

List groups Docs »

Panels Docs »

Basic panel
Panel heading
Panel content
Panel content

Panel primary

Panel content

Panel success

Panel content

Panel warning

Panel content

Panel danger

Panel content

Panel info

Panel content

Wells Docs »

Look, I'm in a well!
Look, I'm in a small well!
Look, I'm in a large well!

Miscellaneous

Shaded Box

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

Call Box

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