Section Gallery Overview

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.

Many sections have a number of style options which effect colors, layout and more. The section gallery provides a way to see all of the options for each section.

View the Section Gallery

There are several section categories:

  • Headers
  • Body
    • 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 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.
    • Body 18 - News Card Group
      • This section displays up to four news articles as cards. It has an optional headline and displays thumbnail images if desired. There is a button to see all news articles.
    • Body 19 - News & Events
      • This section displays news articles along with events from calendar.ku.edu.
    • Body 20 - Prominent News
      • This section is used to add a button grid of two to six large buttons.
    • Body 21 - Wide General Content
      • This section is similar to Body 1 - General Content with a wider WYSIWYG field with a text editor. However it does not have a sidebar of the other options contained within Body 1.
    • Body 22 - Headline & Free Text
      • This section is similar to Body 2 - Headline & Text. However the text field in this section includes a text editor so bolded text, multiple paragraphs, links, bolding an other formatting is available.
  • Call to Action
    • 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
    • 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.
  • Images
    • 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 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.
    • Images 8 - Vertical Image & Free Text
      • This section is similar to Images 3 – Vertical Image & Text and has a large vertical image with a headline, short text an optional link. The difference is that the short text area has a WYSIWYG text editor so you can add links, bold text and more than one paragraph.
  • Lists
    • 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.