Paragraph types

Layout Paragraphs

The paragraphs described below are used to create a column-based layout, with content-centric paragraphs placed within the column to construct a page based on client specifications and available content. When adding a column layout paragraph to a page, you can define the width, margins, color and texture of the overall column paragraph, as well as the color, texture, padding, and margins of the individual column wrappers.

Width Add Margins Color* Texture Padding
  • Tiny
  • Narrow
  • Medium
  • Wide
  • Full Screen
  • add-margin-top
  • add-margin-bottom
  • add-margin-both
  • copper
  • dogwood
  • duke-navy-blue
  • duke-royal-blue
  • eno
  • ginger-beer
  • graphite
  • hatteras
  • ironweed
  • limestone
  • piedmont
  • dots
  • escher
  • lines
  • prism
  • triangles
  • wall
  • waves
  • padding-10px
  • padding-20px
  • padding-30px

*The colors above are described in the Duke Brand Guide color palette.

Columns (Equal)

The Columns (Equal) paragraph type is used to add one or more columns as a layout mechanism. Each Columns (Equal) paragraph can be assigned a width, margins, color, and texture, as well as one or more Column Wrapper. When multiple column wrappers are added, the width of the content area is divided equally among these columns. For example, when two column wrappers are added, each will occupy 50% of the available width in the content area.

Each of the column wrappers may also be assigned a color, texture, padding and margins, as well as several paragraph types for adding or displaying content. The paragraphs that can be added to the column wrapper include Formatted Text, Custom Block, View, Accordion, Tabs, Infographics, External Media Embed, Photo Gallery, and Video Gallery.

Columns (Three Uneven)

This paragraph is essentially the same as the Columns (Equal) paragraph, with two exceptions: In addition to width, margins, color and texture, each can be assigned a column style defining the width distribution of the three column wrappers:

  • 1/4 - 1/2 - 1/4
  • 1/2 - 1/4 - 1/4
  • 1/4 - 1/4 - 1/2
  • 1/6 - 2/3 - 1/6
  • 2/3 - 1/6 - 1/6
  • 1/6 - 1/6 - 2/3

Furthermore, only three column wrappers can be added to each Columns (Three Uneven) paragraph. Within these column wrappers, the paragraphs that can be added include Formatted Text, Custom Block, View, Accordion, Tabs, Infographics, External Media Embed, Photo Gallery, and Video Gallery.

Columns (Two Uneven)

Like the Columns (Three Uneven) paragraph, this paragraph is essentially the same as the Columns (Equal) paragraph with two exceptions. Only two column wrappers can be added, and each can be assigned a column style defining the width distribution of these column wrappers:

  • 3/4 - 1/4
  • 2/3 - 1/3
  • 1/4 - 3/4
  • 1/3 - 2/3

As with the column wrappers in the Columns (Equal) and Columns (Three Uneven), the paragraphs that can be added to each wrapper include Formatted Text, Custom Block, View, Accordion, Tabs, Infographics, External Media Embed, Photo Gallery, and Video Gallery.

 

Content Paragraphs

The following paragraphs can be used to create a variety of content displays; some are used to create their own content, such as the Accordion paragraph, while others display existing content, such as the Custom Block or View paragraphs.

Accordion

The Accordion paragraph type is used to add one or more collapsible sections of content. Each accordion consists of an Accordion Section Title, and one or more paragraphs within the Accordion Section Body. The paragraphs that can be added to the body include Formatted Text, Tabs, View, Photo Gallery, and Video Gallery.

Custom Block

The Custom Block paragraph provides a way to add an existing custom block to the page.

External Media Embed

This paragraph provides the ability to add embed code from a number of different sources (Twitter, Facebook, etc.).

Formatted Text

The Formatted Text paragraph is simply a rich text field with the same formatting options that are available in the standard Body field.

This paragraph is intended for use solely on the front page of the site. It requires four URLs and Link text to promote frequently accessed content such as undergraduate requirements. The links are displayed in a single column as four links with background colors of ironweed (purple), copper (red), Duke navy blue, and piedmont (green).

Image Feature 200px

Adds a 200-pixel high, full-width image; useful for breaking up blocks of text with a graphic element.

Image Feature 500px Parallax

Adds a 500-pixel high, full width image that is pinned to the page creating a parallax effect: as the user scrolls the page, the content above and below the image reveals a different area of the image. Also includes a Copy field where formatted text can be added if desired.

Image Feature 500px Static

Adds a 500-pixel high, full width image; does not require as tall of an image as the Image Feature 500px Parallax paragraph. Also includes a Copy field where formatted text can be added if desired.

Infographics

Another paragraph that is only used on the front page of a site. This is used to create a triptych of “factoids”: an image accompanied by a figure and textual statement to highlight a department’s achievements or other distinguishing facts, for example the number of minority faculty or a national ranking. The infographic colors are determined by the site's theme.

Photo Gallery

The Photo Gallery paragraph can be used to add an unlimited number of images to a user-controlled slideshow. The images are selected from the media library, and new images may be added at the time of selection. The title, or name, of the image in the media library is displayed as the caption for each. Options are available for setting the size (Tiny, Narrow, Medium, Wide, Full Width) as well as adding a margin (above, below, or both).

Tabs

Similar to the Accordion paragraph, but instead of headers with accompanying expanding/collapsing content, each Tab Section consists of a Tab Name accompanied by a Tab Body; when a Tab Name is selected, its accompanying Tab Body is displayed. The paragraphs that can be added to the body include Formatted Text, Accordion, View, Photo Gallery, and Video Gallery.

Video Gallery - 1 Column

Provides the same functionality as the Photo Gallery paragraph with the exception that videos are selected from the media library instead of images. The same size and margin options are available.

Video Gallery - 2 Column

A second video gallery option which displays two videos per slide.

View

The View paragraph allows any block display of any view to be placed on the page, typically the course, events, members by research area, and news views. Many of these have variations (for example the course view can be added with or without exposed filters). Further, some views can be passed a term name as an argument to limit which items are displayed (for example the Members - Research Theme Block).