This page provides a sample of content formatting options available on websites using this template. To view and edit raw HTML, click "Source."
Headings:
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed arcu justo. Nam leo elit, porttitor eu eros non, pulvinar malesuada torto.
Heading 3
Aenean vitae eros sapien. Sed eget nisl convallis, elementum turpis a, vehicula metus. Nunc scelerisque suscipit augue id accumsan.
Heading 3 | H3 Uppercase
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed arcu justo. Nam leo elit, porttitor eu eros non, pulvinar malesuada torto.
Heading 4
Vivamus ut quam arcu. Vivamus eleifend ex sed diam condimentum, at vehicula ligula imperdiet. Proin venenatis pulvinar nulla sed fringilla.
Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel mauris sed enim rutrum scelerisque pharetra ac lectus. Aliquam erat volutpat.
Heading 6
Nam efficitur varius risus ut lobortis. Etiam sollicitudin justo leo, eu ullamcorper mi tincidunt quis. Duis congue odio purus, feugiat lacinia nisl convallis quis.
Note: Headings should be nested in an appropriate order to form an outline of the page, not chosen based on stylistic preference. Heading 2 should always be used first. Headings 5 and 6 should not be needed often.
Block & Text Styes:
Example of a lead paragraph.
Example of a summary paragraph.
Example of an emphasized paragraph.
Example of a small paragraph.
Example of a paragraph using the secondary font.
Example of a basic paragraph that includes a link, italicized text, bold text, and bold italicized text.
Link displayed as a section button
Note: Make sure that the button class (class="button") or section button class (class="button-section") is applied to the link (<a>), not to the paragraph (<p>).
Lists:
Unordered List (Bullets)
- Unordered list item
- Unordered list item
- Nested unordered list item
- Nested unordered list item
- Unordered list item
Ordered List (Numbers)
- Ordered list item
- Ordered list item
- Nested ordered list item
- Nested ordered list item
- Ordered list item
Tables:
| Fruits | Vegetables | |
|---|---|---|
| Red | apples | beets |
| Orange | peaches | carrots |
| Yellow | lemons | squash |
Note: <caption> is a table caption. <th> is a table heading cell. <tr> is a table row. <td> is a table cell.
Images:
Aenean ac urna leo. Suspendisse id metus blandit, aliquam ipsum porta, hendrerit sem. Vestibulum ut nisi hendrerit velit bibendum porta. Vestibulum vel nulla porta, ornare lectus ut, faucibus nibh. Sed elementum lorem non nulla molestie sagittis.
Quisque luctus scelerisque augue ac sollicitudin. Etiam scelerisque quam auctor vehicula ornare. Nunc sed mi facilisis, pharetra erat sed, viverra sapien. Vivamus diam urna, fringilla at ultricies eu, finibus tempor eros. Sed eget libero sed eros faucibus mattis tempus in leo. Sed in consectetur lacus, a sagittis odio.
Vivamus quis dui tempus, commodo lorem eget, vehicula lectus. Morbi at ante mi. Maecenas ultrices, velit rutrum hendrerit tincidunt, lectus neque eleifend ex, mollis hendrerit massa lorem in dolor. Proin sagittis odio sit amet aliquet eleifend. Pellentesque vel sapien rutrum velit tempor bibendum. Duis iaculis, lectus in hendrerit mollis, felis odio viverra velit, quis posuere ligula libero commodo turpis. Nam suscipit ligula a aliquet ultricies. In nec nibh lectus. Nullam venenatis massa nec efficitur rutrum.
Quisque luctus scelerisque augue ac sollicitudin. Etiam scelerisque quam auctor vehicula ornare. Nunc sed mi facilisis, pharetra erat sed, viverra sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor enim risus, sed malesuada nulla hendrerit in. Phasellus orci lectus, faucibus nec gravida in, placerat rutrum metus. Praesent vel bibendum arcu, id sodales ligula. Praesent dapibus tincidunt fermentum.
Aenean ac urna leo. Suspendisse id metus blandit, aliquam ipsum porta, hendrerit sem. Vestibulum ut nisi hendrerit velit bibendum porta. Vestibulum vel nulla porta, ornare lectus ut, faucibus nibh. Sed elementum lorem non nulla molestie sagittis.
Quisque luctus scelerisque augue ac sollicitudin. Etiam scelerisque quam auctor vehicula ornare. Nunc sed mi facilisis, pharetra erat sed, viverra sapien. Vivamus diam urna, fringilla at ultricies eu, finibus tempor eros. Sed eget libero sed eros faucibus mattis tempus in leo. Sed in consectetur lacus, a sagittis odio.
Feugiat lorem placerat orci dignissim, tincidunt euismod augue feugiat. Integer in volutpat libero, eget luctus risus. Aliquam mollis sapien eu dui hendrerit aliquam eget et risus. Nunc faucibus risus ante. Mauris ac magna at augue posuere dapibus et rhoncus nulla. Morbi auctor urna in facilisis tincidunt.
Nunc pellentesque mauris eu justo faucibus rutrum. Mauris non rutrum est, vitae pretium risus. Suspendisse hendrerit velit ut massa pulvinar maximus. Nam scelerisque urna neque. Cras fermentum urna sit amet elit venenatis, in ultrices felis vulputate. Mauris non massa egestas massa eleifend interdum quis sed ligula. Fusce nec urna bibendum, eleifend arcu in, viverra dolor.
Note: Alternative text is required for website accessibility. Caption is optional. Both alt text and caption text will be read aloud by screen-reader software to convey the meaning of an image to a visually-impaired user. Alt text should be succinct, briefly describing the content of the image, and should not duplicate the caption. For example, a photo of the Fitzpatrick Center should have alt text such as "exterior view of the Fitzpatrick Center in spring" and could have a caption such as "The Fitzpatrick Center for Interdisciplinary Engineering, Medicine and Applied Sciences is the home of groundbreaking research at Duke Engineering."
The Thumb class can be assigned when inserting an image using the Media Library. It floats to the left, but has less margin than align-left and is not intended to use a caption. Thumb is intended for use with smaller, square images 1:1 ratio (115px x 155px), like icons.
The Circle class can be added to any square image. If used in addition to left, right, or center image placement.
Pull Quotes:
Donec tincidunt finibus ex, tempor gravida nisi dignissim quis. Suspendisse gravida fringilla leo, molestie lobortis lacus mattis vitae. Aliquam in nibh vitae sem iaculis dapibus at quis dolor. Vestibulum at nibh efficitur, tempus odio at, varius lorem. Sed sodales id velit eu convallis. In eget elit in augue rutrum vehicula vitae id leo.
"This is a blockquote with a source line and no additional class applied."
—Name, Title
Nulla nec elit porta, sagittis arcu in, accumsan magna. Proin purus felis, hendrerit quis semper eu, dapibus at enim. Integer commodo, urna ac eleifend efficitur, velit nunc porttitor est, egestas semper elit odio quis massa. Aliquam pharetra viverra mi sed pulvinar. Vestibulum ac hendrerit ligula, ac interdum augue. Etiam dui magna, ultrices eget volutpat et, posuere quis orci. Nam ut nulla ipsum. Etiam et purus eget nibh lacinia fermentum nec a dolor. Integer ac dignissim metus, a mollis enim. Aliquam aliquam odio ut malesuada posuere. Aliquam ut malesuada diam. Nulla efficitur quam mi, nec semper ligula sodales nec. Sed molestie scelerisque iaculis.
"This is a blockquote with no additional class applied."
Maecenas metus dui, imperdiet ullamcorper faucibus ac, ultrices eget diam. Cras egestas at odio ut aliquam. Vestibulum tempor blandit urna, non elementum ex laoreet quis. Proin sed enim felis. Integer quis urna risus. Praesent urna nisl, iaculis malesuada elit vitae, placerat pulvinar eros. Pellentesque blandit, nulla id commodo sodales, dolor ipsum molestie nunc, eu fermentum lacus augue eu enim. Maecenas congue quam aliquam, porttitor lorem sit amet, faucibus purus. Standus alonium quotitius.
"This is a standalone blockquote with a source line.
"The quotation could go on for more than one paragraph.
"If there is more than one paragraph, the last one will be styled as a source line."
—Name, Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac dui in lorem dignissim cursus a ut ex. Proin id nunc tortor. Pellentesque faucibus tortor sed magna vulputate, et efficitur quam mattis. Duis mattis sagittis dui at suscipit. Praesent tempus est quis purus accumsan pellentesque.
"This is a standalone blockquote with an image that is not aligned; blockquote included class author-image."
—Name, Title
Nulla semper nulla sit amet eros finibus ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer venenatis, eros sit amet consequat aliquam, elit leo egestas nisi, at maximus odio leo vel sem. Nunc semper turpis in cursus efficitur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin fermentum varius ante vel vulputate. Integer laoreet ultrices pretium. Nulla eget leo venenatis, commodo arcu ac, egestas odio.
"This is a standalone blockquote with an align-right image and no additional formatting."
—Name, Title
Nulla semper nulla sit amet eros finibus ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer venenatis, eros sit amet consequat aliquam, elit leo egestas nisi, at maximus odio leo vel sem. Nunc semper turpis in cursus efficitur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin fermentum varius ante vel vulputate. Integer laoreet ultrices pretium. Nulla eget leo venenatis, commodo arcu ac, egestas odio.
Note: The <blockquote> element should only be used for quotations, not for other types of emphasized text.
Blockquotes with no additional class applied will float to the right and left alternately down the page.
Blockquotes with class="standalone" applied will span the full width. Make sure that the class is applied to the entire blockquote (<blockquote>), not to the paragraph (<p>) within the blockquote.
Images can be included in blockquotes without using the author-image class, but this can cause spacing issues with shorter quotations. To better control margins, add the "author-image" class to the blockquote (i.e. <blockquote class="standalone author-image">), and place all other blockquote paragraphs inside a containing <div>. Refer to the raw HTML to see this in use.
Special Formatting:
Auto-Balanced Columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac dui in lorem dignissim cursus a ut ex. Proin id nunc tortor. Pellentesque faucibus tortor sed magna vulputate, et efficitur quam mattis. Duis mattis sagittis dui at suscipit. Praesent tempus est quis purus accumsan pellentesque.
Fusce nec mauris sit amet purus maximus scelerisque quis id tortor. Cras nec scelerisque nisi. Praesent consequat venenatis libero vitae condimentum.
Etiam tempus accumsan nulla, non facilisis risus faucibus ut. Vestibulum luctus interdum scelerisque. Cras hendrerit ullamcorper nisi sit amet iaculis. Aliquam neque metus, pretium in suscipit eu, laoreet a turpis.
Sed fringilla interdum condimentum. Pellentesque pharetra metus eget massa commodo, et scelerisque enim placerat.
Pellentesque efficitur massa pretium fringilla sodales. Curabitur finibus neque lacus, sed efficitur nisi pulvinar ut. Phasellus ullamcorper nisl vitae nunc mollis accumsan. Pellentesque id ante sem. Aliquam vel erat vitae quam varius posuere. Integer ac sapien lacus.
Aliquam tempus est sit amet purus blandit vulputate. Etiam non consectetur ligula. Cras rutrum felis ut arcu placerat ullamcorper. Aliquam aliquam dolor lobortis mi elementum, ut posuere arcu eleifend. Aenean volutpat ac mi eget facilisis. Curabitur ultricies ligula lectus, in volutpat nulla mattis eget. Integer rutrum consequat justo, eu vulputate nunc placerat in. Sed at lorem non velit placerat efficitur vitae non elit. Fusce non hendrerit augue, sed imperdiet dui. Aliquam vel ligula a ante tristique laoreet.
Manually-Grouped Columns
Heading
Praesent tempus est quis purus accumsan pellentesque. Fusce nec mauris sit amet purus maximus scelerisque quis id tortor. Cras nec scelerisque nisi. Praesent consequat venenatis libero vitae condimentum. Etiam tempus accumsan nulla, non facilisis risus faucibus ut.
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac dui in lorem dignissim cursus a ut ex. Proin id nunc tortor. Pellentesque faucibus tortor sed magna vulputate, et efficitur quam mattis. Duis mattis sagittis dui at suscipit.
- Ordered list item
- Ordered list item
- Ordered list item
Note: Wrap HTML in <div class="columns"> to split the content into two columns. The browser will split the content into auto-balanced columns, which may or may not look good depending on the specific content. To control where the column break appears, wrap each column in an additional <div class="group">.
Highlight-Blue
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis aliquam nibh condimentum, lacinia orci pharetra, facilisis erat. Praesent eu nulla interdum, malesuada dui vel, euismod tellus. Maecenas pharetra vestibulum felis, ac tincidunt tortor aliquam sit amet. Sed interdum vulputate elit, vitae euismod enim viverra in. Duis placerat pellentesque dui, eget finibus felis ornare quis. Suspendisse egestas nec elit sit amet rutrum.
Highlight Blue Grid
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Aside
Nam non massa libero. Maecenas sed auctor ipsum. Donec lacinia convallis odio, fringilla ultricies turpis porttitor.
Curabitur id ante ut mauris dictum ullamcorper eget ut nulla. Phasellus eget lacus augue. Phasellus dignissim lacus in volutpat tempor. Vivamus vitae mauris maximus, porta nibh eu, pellentesque nisl. Maecenas dapibus nisi non ante lobortis sagittis. Mauris nisi nibh, scelerisque vestibulum congue ut, gravida id tellus. Sed quis enim porta, iaculis neque et, laoreet ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur a nulla auctor, condimentum ex eu, vestibulum nunc.
Sed mi risus, tincidunt in nisl et, commodo congue justo. Donec consectetur suscipit urna, nec tempus eros. Cras tincidunt dolor quis tellus ultricies, quis porta dui suscipit. Donec tristique consectetur ultrices. Donec leo neque, dapibus a convallis non, placerat non massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis lacinia placerat. Vestibulum tempus turpis sed felis accumsan, vel accumsan lacus placerat.
Accordions:
- Accordion Heading 1
Quisque venenatis sapien at ipsum semper ultricies. Aenean fringilla vestibulum diam vitae congue. Donec ipsum turpis, bibendum eu arcu non, iaculis egestas enim. Donec fermentum, erat sit amet ultricies malesuada, metus ex imperdiet est, ultrices bibendum erat nunc vel diam. Suspendisse et eros eu arcu interdum pulvinar nec ut sapien. Duis diam eros, congue a nunc vel, mattis pretium sapien. Nunc vitae risus mattis, ornare velit a, aliquam orci. Integer sit amet dolor ac nibh venenatis ornare.
- Accordion Heading 2
Etiam non aliquam lectus, finibus iaculis tellus. Nullam blandit, ante in ornare vehicula, velit odio viverra odio, vel tempus lectus turpis eu ligula. Etiam feugiat velit non facilisis pharetra. Vivamus vulputate dictum felis eu pretium.
Subhead
- Unordered list item
- Unordered list item
- Unordered list item
- Accordion Heading 3
- Image
Suspendisse leo elit, condimentum vitae leo nec, consequat vulputate augue. Nunc metus enim, auctor vel viverra nec, faucibus nec turpis. Phasellus at quam eu magna vehicula suscipit. Vivamus nulla sem, bibendum a luctus a, mollis molestie nulla. Nullam a odio nec erat fermentum semper et at urna. Nullam mi sem, condimentum non libero eget, posuere condimentum erat. Maecenas efficitur nulla vel enim pretium, at dignissim tellus varius. Interdum et malesuada fames ac ante ipsum primis in faucibus. In feugiat consequat lorem quis convallis. Maecenas eu tellus bibendum, semper arcu et, sagittis augue.
Contacts
Name (use appropriate heading level for context)
Title
Contact information
Name (use appropriate heading level for context)
Title
Contact information
Name (use appropriate heading level for context)
Title
Contact information
4-Column List
- #1 List item
- #2 List item
- #3 List item
- #4 List item