Content Sections are the building blocks of your pages. Using a Drupal module called "Paragraphs," each Content Section provides a pre-formatted component, or display, to plug content into. When adding multiple Content Sections onto a page, they will be added in rows in the order you add them via the Edit form (with the exception of any Layout Content Sections which may allow for things like columns of content). Content Sections will appear beneath the Body field, so you can leave the Body field blank if you would like a specific Content Section to appear at the top of your page.

Click a button below to view examples of the corresponding Content Section. This page is created using the Card Set: Content Content Section.

Accordion

Creates "drawers" of content. 

Good for: Q&A, FAQ, and collapsing large amounts of content.

Business Card

Display contact and location information for a person or org unit.

Good for: Contact pages or related information.

Buttons

Styled links to other pages.

Good for: Emphasizing links.

Call Out Block

Text area with grey background.

Good for: Emphasizing a block of text with a non-white background.

Call to Action: Default

Emphasized boxes for text and links.

Good for: Calls to action (sign up, donate, etc.) or important messages.

Call to Action: Image

Emphasized boxes for text and links alongside an image.

Good for: Adding visual interest to a CTA.

Call to Action: Text over Image

Emphasized boxes for text and links overtop an image.

Good for: Adding visual interest to a CTA.

Card Set: Content

Displays content in a card grid with or without images or buttons. Used to create this page.

Good for: Introducing multiple sections of a website.

Card Set: Statistics

Displays statistics (in a slider if enough are provided).

Good for: Presenting data in an easy-to-consume way.

Documents: Public

Used to upload one or more documents in a list.

Good for: Policies or forms.

Documents: Secured (login required)

Used to upload one or more documents in a list which require a Lehigh login to view.

Good for: Non-public materials and secret recipes.

Embed: Content Section (existing content)

Place an existing Content Section (with content) onto a page.

Good for: Repeatable content on pages.

Embed: Content Teaser

Previews other content on the website with a summary and image.

Good for: Creating preview-style "links" like you get when you share content on social media.

Embed: HTML Code

Used for placing HTML code within a page.

Good for: Embedding forms, non-YouTube or Vimeo videos (use Embed: Video for those), etc.

Embed: Video

Place a YouTube or Vimeo video on a page.

Good for: Easily adding a video embed with an option to provide a transcript.

Embed: Webform

Used for placing an existing Webform on a page. 

Good for: Placing short forms on a page.

Feed: Events

Displays Events pulled in from the University Events Calendar or created within the site.

Good for: Displaying categorized events related to the current page.

Feed: News

Displays News pulled in from the University News or created within the site.

Good for: Displaying categorized news related to the current page.

Feed: Tagged Content (Teaser)

Provides a feed of content filtered by type and Tags with sorting and pagination options.

Good for: Automatically-updated related content listings.

Heading

Inserts a heading.

Good for: Adding headings between other Content Sections. Accessibility considerations.

Hero: 50-50

A hero section allowing for text in one half and an image in the other half.

Good for: Intros at tops of pages

Hero: Full

A hero section allowing for a full-width image with text overtop.

Good for: A decorative intro on the top of a page.

Hero: Video

A hero section allowing for a video with a caption overtop.

Good for: Decorative intro at tops of pages.

Image: Gallery

Used to display a grid of photos which expand upon click.

Good for: Displaying larger numbers of photos in a gallery.

Image: Large

Allows for a large image to be presented with an optional caption.

Good for: Placing a large, responsive image.

Image: Slider

Use to create an image slider/carousel.

Good for: Decorative sliding content.

Layout: Two Column

Content Section which allows for Content Sections to be placed within in two columns.

Good for: Placing content side-by-side.

People: Inline Content

Used to add a formatted person directly onto a page without having to create a separate page for them.

Good for: Person info on a single page without a need for a detail page.

People: Listing (by type)

Used to place an auto-updating list of existing People on a page by type (e.g., faculty, staff, student, etc.).

Good for: Listing People on contact or directory pages.

People: Listing (existing content)

Used to manually place existing People onto a page.

Good for: Listings of people which will not change often; smaller listings.

Quote

Used to format a quote centered with quotation mark graphic elements.

Good for: Emphasizing a quote on a page.

Text: Freeform

Used to place text within a page; similar to a Body field.

Good for: Placing a Body field-like section under other Content Sections.

Text: Freeform with Image

Used to easily place images alongside text with optional text wrapping.

Good for: Easier insertion of images alongside text (rather than formatting images in the Body field).

Text: List

Provides nicer formatting of unordered and numbered lists. 

Good for: Emphasizing a list.