Cascade Style Guide - Block Guide

As defined by Hannon Hill, Cascade blocks:

A block is a piece of content that can be inserted (with or without styling) into any page region. Therefore, whenever there is content that is common to many pages or regions, e.g. an “About the Company” section that appears after every press release and newsletter, that content should be put into a block. Doing so allows the appropriate content to appear in many pages while always being updated from one place, making it easy to maintain consistency in that text/markup across many pages. Cascade users can reuse a single block on an unlimited amount of page regions.

Blocks can contain static content, content that does not change unless modified by a user, or dynamic content, content that changes based on updates outside of Cascade CMS or other day-to-day activities.

Why HAVE a Block Guide?

As the name states, blocks are the basic building blocks of Cascade and is one of the most used components. This always up-to-date Cascade Block Guide is a useful reference to help both seasoned and rookie Cascade end users. Reference this Block Guide to better understand and identify all the re-usable content blocks made available from within a Cascade page or news post form's content row section.

Example of a screen capture example of Cascade block location in a form Example: screen capture example of Cascade block location in a form.

blocks for textual content

what is an accordion block?

An accordion block is an efficient way to present organized content on a page. Accordion drawers contain and collapse content as a content consumer clicks them. This allows a page to contain a lot of content without consuming a lot of vertical space and overwhelming consumers.

The best example of an accordion is the page you are currently viewing and this visual example:

form example and options

  • Accordion heading
  • Accordion styling in two colors Purdue Black and Gold
  • Unlimited accordion drawers with WYSIWYG editors

FAQ

Q: What is a WYSIWYG editor?
A: Learn more here and learn more about the WYSIWYG editor block.

Q: Is there a maximum limit on the number of accordion drawers I can use?
A:
 No. However, an excessive amount of drawers could be a content distraction for content consumers. Think less is more. Also, excess drawers may cause browser load and slowness on some user's systems.

what is a call to action block?

A call to action (CoA) banner block is a smart way to motivate a content consumer to perform an action on your site. In the most basic terms, a link (or button) on a page is a CoA. For example, you may want a student or 4H youth member to sign-up for an event or club after they read about the requirements and benefits on a page.

The best example of a CoA banner block is this visual example:

form EXAMPLE AND options

  • CoA title
  • CoA body text
  • CoA link with internal and external URL and browser tab options

FAQ

Q: What is the best use of a call to action (CoA) banner?
A: Use a CoA banner when you have one very important action for content consumers to perform on your site or page. Keep it simple and try not to use multiple CoA blocks per page.

What is a QUOTE block?

Use the quote block to stylize a textual quote. For example, a historic quote or a department head's speech key point.

The best examples of a quote block are these two visual examples:

form example and options

  • Quote styles with two visual options (see examples above)
  • Content for quote text
  • Source for quote author, date, etc.

FAQ

Q: What is the difference in quote block styles?
A: One has a large Purdue gold quotation mark and the other replaces this with a gold vertical bar left of the quote block.

what is a HEADSHOTS block?

A headshots block is used to display a person's contact info and 'headshot' photo on a page. 

The best example of a headshots block is this visual example:

form EXAMPLE and options

headshots-form-example.jpg

  • section heading
  • personal information to include name, photo upload, department, area of expertise, phone, email, etc.
  • WYSIWYG editor to add bio or additional information

FAQ

Q: Are there other ways to embed user and group contact information on a Cascade page?
A: No. However, The College's and each department's directory can be linked on any page or via any call to action option. Learn more about the directory at AGIT's directory guide.

What is a WYSIWYG editor block?

The 'What You See Is What You Get' (WYSIWYG) block is the core text editor in Cascade CMS. This block acts as a content editor in the same way word processor applications work. Not only is it a standalone block, but it also used in many other blocks. This block is used to input text, apply text styling, add content links (and buttons), add images, embed videos, and is used to format this content on a page.

A basic example of a WYSIWYG block is this example:

form example and options

The WYSIWYG options include:

  • Undo/Redo
  • Bold and italic text styles
  • Text image alignment
  • Format(s) any highlighted text to create headings, paragraphs, text quotes, and button styles
  • Bulleted and numbered lists
  • Insert, edit, remove URL links for any highlighted content
  • Insert edit an image
  • Insert, embed, or edit a video
  • Source code editor to edit and create on-page HTML/CSS/SCRIPT code and embed code as needed

Note: You can mouse hover over the WYSIWYG menu buttons to identify what each button is named.

FAQ

Q: Can I see the WYSIWYG in action?
A: Of course! The Cascade end user introduction training course video covers this.

Q: Do keyboard shortcuts work?
A: Yes. For example, the basic CTRL+C for copy, CTRL+X for cut, and CTRL+V for paste, and all others Windows shortcuts work in the editor. The same works for macOS.

Q: Can I embed a YouTube video?
A: Yes. This option is available via the video menu button. You can also use the fullwidth video and responsive video block options.

What is a columns block?

The columns block is used to input multiple columns of WYSIWYG text, content call-to-action links (and buttons), images, and embed videos into a 'newspaper column' look. The 'What You See Is What You Get' (WYSIWYG) is the core text editor in Cascade CMS. This block acts as a content editor in the same way word processor applications work. Not only is it a standalone block, but it is also used in many other blocks such as this one.

A basic example of a columns block is this example:

columns block example with three 33% columns of lipsum text

form example and options

The columns block options include:

columns form example with text field options

  • Section heading
  • Column choices (use WYSIWYG block option for single column full body)
  • Columns WYSIWYG text editor

FAQ

Q: Can I see the WYSIWYG in action?
A: Of course! The Cascade end user introduction training course video covers this.

Q: Do keyboard shortcuts work?
A: Yes. For example, the basic CTRL+C for copy, CTRL+X for cut, and CTRL+V for paste, and all others Windows shortcuts work in the editor. The same works for macOS.

Q: Can I embed a YouTube video?
A: Yes. This option is available via the video menu button. You can also use the fullwidth video and responsive video block options.

blocks for news article posts

What is a FEATUREd STORY block?

The featured story block allows a single story to be created manually or filtered and displayed on a page from a news site.

An example of a featured story block on a page:

featured-story-block-example.jpg

form EXAMPLES and options

The featured story block requires a two-step approach of having both an on-page block and an additional event site tag filter block. There is also an option to create a manual link to any asset.

featured-story-form-example-step-1.jpg

The featured story block form is used to:

  • create desktop and optional mobile headings
  • news article sort options:
    • dynamically add the most recent news article post
    • manually select a news article post
    • manually create and link any internal or external asset
  • news site source options of CoA, Extension sites or both
  • filtering options by category listing page or tags

Note: The tags form option at the bottom of all forms is for internal CMS tagging and not part of the events listing block form settings.

FAQ

Q: What block can I use for multiple news articles?
A: There are multiple block choices to include the featured stories, news articles, top stories, and two panel stories blocks.

Q: Is there a list of filters to reference?
A: Yes there is!

Q: What is a category listing page? Where are they located?
A: A category listing page is a pre-built event or news metadata asset that groups all similarly tagged items onto a searchable index page. These category listing pages are located in the root directory of a news or event site.

What is a Featured STORIES block?

The featured stories block allows multiple news articles (at least three are recommended) to be created manually or filtered and displayed on a page from a news site.

An example of a featured stories block on a page:

form EXAMPLES and options

The featured stories block requires a two-step approach of having both an on-page block and an additional event site tag filter block. There is also an option to create a manual link to any asset.

featured-stories-form-example.jpg

The featured stories block form is used to:

  • section heading
  • background-color choices
  • news article sort options:
    • dynamically add the most recent news article post
    • manually select a news article post
    • manually create and link any internal or external asset
  • news site source options of CoA, Extension sites or both
  • filtering options by category listing page or tags

Note: The tags form option at the bottom of all forms is for internal CMS tagging and not part of the events listing block form settings.

FAQ

Q: What blocks can I use for multiple news articles?
A: There are multiple block choices to include this block, news articles, top stories, and the two panel stories blocks.

Q: Is there a list of filters to reference?
A: Yes there is!

Q: What is a category listing page? Where are they located?
A: A category listing page is a pre-built event or news metadata asset that groups all similarly tagged items onto a searchable index page. These category listing pages are located in the root directory of a news or event site.

What is a NEWS ARTICLES block?

The news articles block allows multiple news articles to be created manually or filtered and displayed on a page from a news site.

An example of a news articles block on a page:

news-articles-block-example.jpg

form EXAMPLES and options

The news articles block requires a two-step approach of having both an on-page block and an additional event site tag filter block. There is also an option to create a manual link to any asset.

news-articles-form-example.jpg

The news articles block form is used to:

  • section heading
  • news article sort options:
    • dynamically add the most recent news article post
    • manually select a news article post
    • manually create and link any internal or external asset
  • news site source options of CoA, Extension sites or both
  • filtering options by category listing page or tags

Note: The tags form option at the bottom of all forms is for internal CMS tagging and not part of the events listing block form settings.

FAQ

Q: What blocks can I use for multiple news articles?
A: There are multiple block choices to include this block, featured stories, top stories, and the two panel stories blocks.

Q: Is there a list of filters to reference?
A: Yes there is!

Q: What is a category listing page? Where are they located?
A: A category listing page is a pre-built event or news metadata asset that groups all similarly tagged items onto a searchable index page. These category listing pages are located in the root directory of a news or event site.

What is a TOP STORIES block?

The top stories block allows multiple news articles to be filtered and displayed on a page from a news site.

An example of a top stories block on a page:

top-stories-block-example.jpg

form EXAMPLES and options

The top stories block requires a category listing page connection to function (see FAQ below).

top-stories-form-example.jpg

The top stories block form is used to:

  • selecting a pre-built category listing page (see FAQ below)

Note: The tags form option at the bottom of all forms is for internal CMS tagging and not part of the events listing block form settings.

FAQ

Q: What blocks can I use for multiple news articles?
A: There are multiple block choices to include this block, news articles, featured stories, and the two panel stories blocks.

Q: Is there a list of filters to reference?
A: Yes there is!

Q: What is a category listing page? Where are they located?
A: A category listing page is a pre-built event or news metadata asset that groups all similarly tagged items onto a searchable index page. These category listing pages are located in the root directory of a news or event site.

What is a NEWS listing block?

The news listing block allows multiple news articles to be created manually or filtered and displayed on a page from a news site.

An example of a news listing block on a page:

news listing block on-page example screenshot showing images and news list text

form EXAMPLES and options

The news listing block requires a two-step approach of having both an on-page block and an additional news listing filter block. This block can be added by choosing Add Content > User Blocks.

news listing form example screenshot
On-page form options, content creators must add and choose a filter block.

 

news listing filter block form example screenshot
Filter block form options.

The news listing block form is used to:

  • section heading
  • news site options:
    • Ag News site article filtering
    • Extension News site article filtering
    • Most recent Ag and Extension news articles will list Note: no filtering is available with this option.
  • filtering options of:
    • None (most recent articles)
    • By news category
    • By news subcategory
    • By category and subcategory
    • By tags
  • Listing display options of allowing article images displayed or a list with no images just text.
  • Article display limits for the number of articles listed on page load and the number of articles loaded when the view more call to action button is selected.

Note: The tags form option at the bottom of all forms is for internal CMS tagging and not part of the events listing block form settings.

FAQ

Q: What blocks can I use for multiple news articles?
A: There are multiple block choices to include this block, featured stories, top stories, and the two panel stories blocks.

Q: Is there a list of filters to reference?
A: Yes there is!

What is a two panel stories block?

The two panel stories block can link to any internal site asset or external source to be displayed on a page (looks best when used at the footer of a page).

An example of a two panel stories block on a page:

form EXAMPLES and options

The two panel stories block is made using a left-and-right panel.

The two panel stories block form is used to create:

  • the panel title
  • 250 characters of story lead-in content to grab a content consumer's attention
  • background image (light filter is added by CSS code) and alt text
  • call to action button link with internal and external options

Note: The tags form option at the bottom of all forms is for internal CMS tagging and not part of the events listing block form settings.

FAQ

Q: What blocks can I use for multiple news articles?
A: There are multiple block choices to include this block, news articles, featured stories, and the top stories blocks.

Q: What is a category listing page? Where are they located?
A: A category listing page is a pre-built event or news metadata asset that groups all similarly tagged items onto a searchable index page. These category listing pages are located in the root directory of a news or event site.

block for events

What is aN EVENTS LISTING block?

Cascade sites are made of three independent but shareable sites:

The Ag sites are:

  • Ag site for CoA based pages
  • Ag-Events site for CoA based calendar events
  • Ag-News site for news article posts

The Extension sites are:

  • Extension site for CoA based pages
  • Extension-Events site for CoA based calendar events
  • Extension -News site for news article posts

The events listing block allows created event site events to be tagged, sorted, and displayed on a page.

An example of an events listing block on a site page:

form EXAMPLES and options

The events listing block requires a two-step approach of having both an on-page block and an additional event site tag filter block.

The on-page block's form is very simple and is only used to locate the event site's filter block:

The event site's filter block form is used to:

  • identify an event's homepage for event data access
  • add a block heading and sub-heading
  • limit the number of events listed on-page
  • set a current filter to simply display all newly created site events in date order
  • set AND/OR logic filters:

    AND logic
    To identify events that meet all criteria within a set of filters, use AND logic. For example, to filter all events tagged 'Agriculture' AND 'State Fair' on-page via the events listing block.

    OR logic
    To identify events that meet at least one criteria within a set of filters, use OR logic. For example, to filter any events tagged 'Agriculture' OR 'State Fair' on-page via the events listing block.

  • add a 'see more' call to action link button with internal and external link options

Note: The tags form option at the bottom of all forms is for internal CMS tagging and not part of the events listing block form settings.

FAQ

Q: Do I need to use an events listing block?
A: Not always. Events can also be viewed from an event site's index page(s). An event index page also displays:

  • adjustable on-page content/tag filters content consumers can adjust
  • RSS and calendar sharing options
  • a full list of similar tagged events

For example, a direct url link could be used to direct content consumers to a news index page via hyperlink text or a call to action button or block. This example would bypass the need for an on page events listing block.

Q: Can more than one events listing block be placed on a page?
A: No.

Q: Is there a list of filters to reference?
A: Yes there is!

Q: What is an event block? Where are they located?
A: An event block is a pre-built data definition that is located within an event site's /_files folder. These are read-only files built and placed by your web team and are based on pre-defined search criteria. Contact the web team if you think a filter solution has not been addressed by the pre-built blocks.

blocks for media

what is a fullwidth video block?

A fullwidth video block is used to embed a full width YouTube video on a page. 

The best example of a fullwidth video block is this visual example:

form EXAMPLE and options

  • section heading
  • YouTube video ID entry to pull the video from

FAQ

Q: Are there other ways to embed a video on a page?
A: Yes. The responsive video block and any WYSIWYG editor have options to embed video media on a page. These options do not use the full width of a page to display a video.

what is a responsive video block?

A responsive video block is used to embed a YouTube video on a page. 

The best example of a responsive video block is this visual example:

form EXAMPLE and options

  • heading (ADA compliance)
  • video block width options
  • video aspect ratio options (learn more)
  • YouTube ID field
  • title of the video (ADA compliance)

FAQ

Q: Are there other ways to embed a video on a page?
A: Yes. The fullwidth video block and any WYSIWYG editor have the option to embed video media on a page.

what is a RSS block?

A RSS block is used to pull in a single remote RSS feed via XML to a page. 

The best example of a RSS block is this visual example:

rss block example with lines of rss text and more news button

form EXAMPLE and options

rss form example with text and selection fields checked

  • section heading
  • block or URL choice (block uses a single URL, but can be used on multiple pages)
  • URL address for remote XML feed or use a feed block located at Add Content > User Blocks
  • RSS feed display options
  • RSS page listing limit of 1 to 5 articles
  • Optional CSS classes to edit on page text styling
  • Call-to-action link section

FAQ

Q: How can I overcome RSS feed remote push/pull errors or poorly configured XML issues (CORS errors)?
A: We have had luck using third-party tools to re-direct RSS XML. Contact the Agcomm Web Team to learn more.

Q: Can a page have more than one RSS feed?
A: No. The page coding does not allow this. Users can however use a WYSIWYG block to direct users to other RSS feeds, sources, or to other pages on their site.

what is a social media block?

A social media block is used to embed tintup.com export code into a page. This third-party tool is used by Purdue to provide nice-looking aggregated social media feeds into a page.

The best example of a social media block is this visual example:

social-media-block-example.jpg

form EXAMPLE and options

social-media-form-example.jpg

  • section heading
  • tintup.com script code embed

FAQ

Q: Can I embed social media feeds using another tool?
A: Yes. Some third-party tools may work by embedding their export code into the embed form.

Q: How do I establish a tintup.com account?
A:
 This Tint setup and support page has the information you need to create a Tint account.

what is a POINTS OF PRIDE block?

A points of pride block is used to showcase facts on a page. For example, a department's national rank standing. Or a county's outreach statistics for an outreach program.

The best example of a points of pride block is this visual example:

form EXAMPLE and options

  • icon image using Font Awesome as a resource
  • icon image alt text to support ADA requirements
  • fact title heading
  • WYSIWYG text editor for fact body text
  • fact source

FAQ

Q: How many facts can I list per block?
A: Three.

Q: Where are icons located?
A: Browse via the block form to the directory listed in the Icon Image field's note. The Ag site's: /_files/images/icons/ directory.

Q: Can I request an icon?
A: Yes. Send a request to the web team.

blocks for images

what is a full width image block?

The full width image block adds the ability to showcase a clickable (or not) full-width lower page body hero-type image on any Cascade Page. 

The best example of a full width image block is this visual example:

screencapture of full width image for alumni cheese

form example and options

full width image Cascade form screen capture

  • Image heading
  • Image Alt Text (very important for ADA support, see FAQ below)
  • Caption for image
  • Image link (content consumers click the image for call-to-action)

FAQ

Q: Does the image require a header and caption?
A: No. The minimum requirement is alt text to support ADA needs for all content consumers, as not all text readers cannot read the text in the image.

what is a Centered image block?

The centered image block adds the ability to showcase a single image on any Cascade Page. 

The best example of a centered image block is this visual example:

centered image screen captured example

form example and options

centered image block screen capture example

  • Image selector
  • Image Size/Column Width controls how much of the page body the image will use
  • Image Alt Text
  • Image Caption
  • Image Options
    • Enable Lightbox: adds a pop-up image viewer
    • Box Shadow: adds a light shadow to an image
    • Set Image Height: override to control height of larger images

FAQ

Q: Doesn't the WYSIWYG editor also do this?
A: Yes. However, this option makes it easier to do and will not cause CSS code and alignment issues.

what is an image group block?

The image group block adds the ability to showcase a row of up to four images (in a row) on any Cascade Page. 

The best example of a centered image block is this visual example:

screen capture of image grouping

form example and options

screen capture of image group block form

  • Heading
  • WYSIWYG Editor
  • Images per Row (up to four images are possible)
    Note: There is no limit on the number of images you can add.
  • Image Options  
    • Enable Lightbox: adds a pop-up image viewer. Note: The linked image option is disabled if you choose to use a Lightbox.
    • Box Shadow: adds a light shadow to an image 
    • Set Image Height: override to control the image height of larger images 
  • Image selector 
  • Image Alt Text 
  • Image Caption
  • Image Link

Note: Choose the + symbol to add each image and update the alt text and captions. 

FAQ

Q: Doesn't the WYSIWYG editor also do this?
A: Yes. However, this option makes it easier to do and will not cause CSS code and alignment issues.

Q: How can I share more than four images?
A: Add additional image group blocks block to the page.

Q: How do I link images to other resources?
A: Disable the Lightbox option. Another option is to use the Linked Image Group block instead.

what is a linked image group block?

The linked image group block is similar to the image group (with image options) block. However, this version makes it easier to showcase a row of up to four linked and clickable images (in a row) on any Cascade Page. This block form is similar to the image group block form, but it does not have the extra image choices such as the Lightbox option, which disables direct linking.

The best example of a linked image block is this visual example, which shows a row of logos. Each logo is linked to a different website:

linked-image-group-block-example.jpg

form example and options

linked-image-group-block-form-example.jpg

  • Heading
  • WYSIWYG Editor
  • Images per Row (up to four images are possible)
    Note: There is no limit on the number of images you can add.
  • Image selector 
  • Image Alt Text 
  • Image Caption
  • Image Link

Note: Choose the + symbol to add each image and update the alt text and captions. 

FAQ

Q: Doesn't the WYSIWYG editor also do this?
A: Yes. However, this option makes it easier to do and will not cause CSS code and alignment issues.

Q: How can I share more than four images?
A: Add additional image group blocks block to the page.

Q: How can I show a Lightbox image gallery?
A: Use an Image Group (with image options) block for more options.

FAQ

Q: Where can I learn more about adjusting site navigation blocks?
A:
Find how-to edit navigation on a site here.

Q:
What are the banner Carousel and Introduction sections?
A: All pages have the option for banner and information sections. Enabling the banner block section allows content creators to add images, titles, headings, and call-to-action banners that rotate at the top of a page.

Enabling the introduction block section adds a two-column info section that content creators can add overview information and point of contact information.

Example of a banner and introduction block sections:

screenshot example of a banner block on top of an information block