Sections Overview

Sections Overview

Introduction

The KU CMS - Sunflower pages are built using Sections. Think of a section like a layer of a cake.  The layers or sections stack on top of each other to build the page.

There are several section categories:

  • Headers
  • Body
  • Call to Action
  • Events
  • Images
  • Lists

Headers are required on all pages. Only one header can be used per page.

Each page must also contain at least one Body, Call to Action, Events, Image or List sections.

Header Sections

Body Sections

  • Body 1 - General Content
    • This versatile section has a number of nested sections. It has a general content section with a WYSIWIG editor. It can include accordions, tabs and images. It also has an optional sidebar with a list section, a text section, and a block section. Choose left or right sidebar orientation. If no sidebar is used the section is centered.
  • Body 2 - Headline & Text
    • This section has a headline and intro text. Choose from serif and sans-serif headline font options.
  • Body 3 - Pull Quote
    • This section has an attributed pull quote with the quoted person’s image, name and title. Select center-aligned or left-aligned options.
  • Body 4 - Card Group
    • This section has one to four cards. Each card includes a headline, short text, an optional image and link.
  • Body 5 - Statistic Card Collection
    • This section has one to four statistic cards. Each card includes a statistic, short text, and an optional link. Choose from several background colors.
  • Body 6 - Statistic Collection
    • This section features a group of three statistics with an optional headline and a short text area. Choose Brick or Night statistic color.
  • Body 7 - Image/Video Side-by-Side
    • This section has an image or video with a headline and a text area. Add up to three optional links. Choose left or right alignment.
  • Body 8 - Qualtrics Form Embed
    • This section is used to insert a form into the page. The form is created in Qualtrics and added to the CMS with this section.
  • Body 9 - Table
    • This section is used to add a table to the page. Choose from six table styles and sorting and search options.
  • Body 10 - Divider
    • This section is used to add a divider line between sections. Choose from seven divider styles and three divider widths.
  • Body 11 - Contact Info
    • This section is used to create an About page or section. It includes a embedded Google map or building image, a headline and contact information.
  • Body 12 - Accordion
    • This section is used to add accordions. Single accordions have a blue chevron arrow on the left. Sets of multiple accordions appear as panels with a chevron arrow to the right.
  • Body 13 - Profile Directory
    • Use this section to insert Person Profiles into a page.
  • Body 14 - Buttons
    • This section is used to add one to three buttons to a page. Select from numerous button styles.
  • Body 15 - Button Grid
    • This section is used to add a button grid of two to six large buttons.
  • Body 16 - Insert Block
    • This section is used to insert a block into a page.
  • Body 17 - Insert View
    • This section is used to insert a view into a page.

Call to Action Sections

  • CTA 1 - 1 Button
    • This section is full-width and features a headline, sub-headline, short text, and single button. It has two background options.
  • CTA 2 - 1 to 3 Buttons 
    • This section is full-width and includes a headline, short text and one to three buttons. Choose from several background color options. Buttons are available for all color options. A link is available on the Steam Lightest background option only.
  • CTA 3 - 1 to 3 Card Carousel
    • This section is a full-width card carousel featuring one to three cards with headline, short text and a link icon. Choose from two background options.
  • CTA 4 - Overlay Image w/Button
    • This section is a full-width photo with a color overlay. It includes a headline and a button with optional short text. Choose from three color overlay options.
  • CTA 5 - 1 to 2 Buttons w/Link List
    • This section is full-width with a headline, short text, one or two buttons, and a list of links. Select between lake or night background colors.
  • CTA 6 - Social Media
    • This section is full-width with a headline and links to your social media presence on Facebook, Instagram, Twitter and YouTube. Choose from three background options.

Events Sections

  • Events 1 - Three Column
    • This section displays three-columns of events imported from the KU Calendar with a headline, and link to see all events. The date, event title and description are displayed.
  • Events 2 - Three Column w/Images
    • This section displays three-columns of events with images imported from the KU Calendar with a headline, and link to see all events. The date, event title and description are displayed along with the event image.
  • Events 3 - Two Column
    • This section displays two-columns of events imported from the KU Calendar with a headline, and link to see all events. The date, event title and description are displayed.

Image Sections

  • Images 1 - Basic
    • This section uses one or three images with optional captions. For single images, select from three caption locations. For two images, select symmetrical or asymmetrical display.
  • Images 2 - Image w/Text Box & Stripe
    • This section has a large image and text box with a background stripe. The text box includes a headline, short text and an optional link. Choose image orientation and background color for text box.
  • Images 3 - Vertical Image & Text
    • This section has a large vertical image with a headline, short text and an optional link.
  • Images 4 - Shadow Image & Text
    • This section has a large vertical image with a shadow that appears upon scroll. It includes a headline, short text and an optional link. Choose from several shadow colors.
  • Images 5 - Image Collection
    • This section has an image carousel with optional captions, a small headline and text. The images can be viewed on a gallery page.
  • Images 6 - Video
    • Use this section to insert a video embed or iFrame into a page.
  • Images 7 - 2 Images w/Text & Stripe
    • This section has two large images each with a headline, text and an optional link on top of a diagonal stripe.

List Sections

  • List 1 - Link List
    • This section is used to create a concise list of links with a headline.
  • List 2 - Item List w/Button
    • This section could be used to create lists of contacts or other lists. It includes a headline, short text, optional contact fields and an optional button.
  • List 3 - Two Column List
    • This section has two columns of lists with a headline, links and short text. An optional headline is available on the second column.
  • List 4 - Image w/List
    • This section has a headline, short text, an image, a list headline and a link list. Choose left or right alignment.
  • List 5 - Associated Link List
    • This section has a headline and a list of associated links.
  • List 6 - Alternating Image & Text List
    • This section has a list of alternating sets of images with headlines, short text and optionally up to three links. Choose an alternating background color.
  • List 7 - Thumbnail List
    • This section has a list of thumbnail cards with a headline, thumbnail image, card headline, card text and an optional link.
  • List 8 - Image w/Two Lists
    • This section has a large image with a headline, and short text that are notched into the photo and two lists of links with list headlines.

How To’s

See the documentation for individual sections for detailed instructions.

Guidelines and Best Practices

  • Headers are required on all pages.
  • Only one header can be used per page.
  • Each page must also contain at least one Body, Call to Action, Events, Image or List sections.