Accordion

Add content within an expanding, collapsing accordion.

Once you have added an accordion paragraph type, you will automatically have your first ‘Accordion Item’ added. Every Accordion item require a title, which will be what the user may select to expand the accordion and then ‘body’ which are the details therein.

Accordion Options

You may add a title and description which displays above the accordion section, remove the background color or add a background variant. By default and in most all use cases the relief background color will be used.

Block Quote

Add a separated out quote section of text

Use the quote field to add in the quote, no need to wrap with quotation marks, we cover those. An author can be attributed in the author field

Options

Give a title and description above your quote if desired

Button

A paragraph used primarily in the sidebar paragraph region.

• Give your button a URL, Alt Text and Title.
• If your url is external please select the ‘external link’ toggle.
• If desired, you may give your button some descriptive text

Call to Action

Add a special section to gather attention with a large image and link

Your title, description will display as your CTA content, your link url will be placed in a button.

Be sure to type in a full URL as noted on the site, use ‘https://yourlink.com’ not yourlink.com

For the media please use best media practices found on the Best Image Practice documentation.

The option of placing a text on card will place your inputed text on top of an image but within a card, useful if your image doesn’t have specific negative space.

Cards

We have built in a ton of options to display your cards to suit most any need and display.

Card Section

Add a card section to your page and it will add in your first ‘card’ type which is detailed below. For now let’s focus on the ‘Card Section’ which has an ‘options’ tab. By default the site is structured to display a 3 column layout, should you need a 2 or 4 those options exist in a layout dropdown for you. You may also add a title and descriptive text above this section if desired.

Card

Now on to the meat and potatoes - the individual cards.

• You may add an image to your card - note that the cards utilize the same media upload best practices as other media upload fields on the site.
• The title and body fields are required, a body limiter counts your text to assist in the body length of the card.

• Next you may add a link to the button with the ‘Link Url’, ‘Link Title’ and Link alt text fields. Directly below is the ‘has button’ toggle, select this and a button will display on the card in place of the full card being a link.
• Select the ‘add card’ button to continue adding cards

Pop up Card

There is an option for a pop up card, this makes it possible to have a card, then place content within the ‘pop up text’ field for a bit more text or to link to an external page. Note that both the pop up text body and pop up card toggle must be selected.

Extras

Individual cards may utilize some extras to denote extra information - such as badges, category text and bottom category text.

Columns

Add column layouts to your page

After adding a columns paragraph type you will automatically have your first column added. To add more columns simply select ‘add column’. Within your options you may add a title and description to your column layout if desired. Columns should generally be used on a more traditional landing page, e.g. the front page of the site or a more complex layout that may be pointing to additional interior pages.

Individual Column

Each column may be customized and can then have additional paragraphs added within. For example in one column you may have a text block, then a content reference, then some more text. The column component will display the amount of columns you create.

This section is made with columns and list type paragraphs

Contact

Add a contact card with modal capabilities to group contact information on a subject that isn’t readily referenced on the site.

• Add a media image if desired, use standard upload media practices
• Give your contact entity a name, title, description
• You will see there is a description field as well as a body, the body field is for additional text within the pop up on the contact

Content Reference

An extremely useful paragraph that will link and pull images, text, etc of the reference page creating a nice ‘link card’ to content on the site.

It’s as easy as creating a new content reference paragraph, then typing in the TITLE of the content you wish to reference.

Embeds

This paragraph type has security restrictions and as such requires a ticket into CIRES IT for us to implement. However, know that we developed a way to easily add in specific embeds from outside sources such as a twitter reel, a mail signup form, etc. So good to know it exists but always place a ticket in with ciresithelp@colorado.edu with the embed code for us to implement.

Featured Cards

These are really just used on the front page and are a simple variant of the card section. These have a much more ‘call to action-y’ look and are used to better categorize 3 options. They utilize the same ‘individual cards’ and option sets as the cards within the card section.

File Upload

Upload a file to the paragraph sidebar

Add the file upload paragraph, select the ‘media’ ( aka the document ) and insert.

Note as of writing this the file within the Drupal preview may display a broken image, please disregard as a fix for Drupal will correct this

Image

Image paragraphs can be accessed on Landing Pages, News, Events, and Spotlights.

When selecting this paragraph, the options will be to Choose A File, or choose an image that has already been uploaded to the site in the media library. After selecting an image either from an upload, or from the media library, the options below are Title, Icon, and Caption. If these are blank, they will not display anything.

There are several options when adding an image, these are under the option tab.

First will be the Image Cover option. This is how the image shows on the page. It is set to cover by default, which is the best option for most photos. This makes the image fill the space provided for the photo. The other option is Contain. This will scale down the photo until the entire image fits in the space provided. This will cause the photo to have white space on either side, and not have rounded corners. This option is recommended for images with data in them, such as graphs or maps, but most other photos should be set to cover.

The next option is Image Expand. If selected, the image on the page can be clicked and expanded into a modal where it will show the full sized image, along with the caption and title. This will also give the image a small icon in the right hand side and a hover effect.

The next option is Collapsable. This will collapse the caption into an expandable drawer. This option is only recommended for center aligned images, as a right or left aligned image would have a lot of empty space where the caption should be.

The next option is a layout option for the image and caption, center, left, or right. These options refer to the image, so if left is chosen, the image will be on the left, right the image will be on the right. The caption will be underneath if center is chosen.

The last option is image size. There are three options: 100%, 66%, 33%. These options will scale down your image size to better suit your layout if need be.

Gallery

Gallery paragraphs can be accessed on Landing Pages, News, Events, and Spotlights.

When selecting this paragraph, the first fields are the title, and gallery layout. The limit on gallery images is 6.

The gallery layouts examples are below.

The captions for these images will automatically be displayed below in the order that they were added in the expandable caption drawer. The image select is the same as the image paragraph, but the options in the options tab will not have an impact on the gallery.

Every gallery has a modal expand on it already, which shows the image, its title and caption as seen below.

Info Column

This paragraph uses a mix of media, list items, and content reference. 

List

Add a list of content with or without links. Our lists are pretty customizable and use our standard referencing structure. First you create your list and your first list item displays.

You may add as many list items as you want to your master list. Note that you can create a more classic looking list by turning the ‘card list’ option off within the main List options. You may also add a title and description above this list as required.

List Item

Your individual list items can take the form of 3 types depending on your goals:

The following options will have you selecting either ‘add content reference’ or more often the ‘add list item’ option seen here:

• A Link item → fill in your link url, link alt text and link title, in general you would ALWAYS select external link in this case.
• List item without a link → If you want a list item that has no link, simply only fill in the ‘List item title’ and no link fields.
• A referenced item. Much like the ‘content reference’ card above, you can select piece of content and it will display in your list as needed.

Logo

Display a logo as a paragraph. These are preset and require CIRES IT and CIRES Communications to create a multi path svg depending on the logo. Should you find a logo needs to be added to this select list please contact ciresithelp@colorado.edu

• Select your logo
• Select if you want it to link to the website the logo is affiliated with

Profile Group

Mix and match a group of contacts / profiles in a grid to your page.

• Give your group a title and description if desired
• By default the profile group will dispay a ‘content reference’ card for a person, if not needed remove and use the..
• ‘Add contact’ option which will use the same ‘contact’ paragraph type described above.
• You may use as many contacts and content reference items as desired and reorder them via the paragraphs display as needed.

Reference Block

Reference news stories or events on landing pages.

• First you must go to the news story or event that you wish to be referenced on your page.
• On the desired news/event will be a field called “Display On”. Select which page(s) you would like this news story/event to appear on.
• Once this is done, navigate to the page that you want the news/events to display on.
• Under paragraphs, select “Reference Block” and in the drop down, select either News or Events. You may add another paragraph to get the other content type should you want both.
• Give this paragraph a title and description should you want one.

Slideshow

Create a slideshow on your page.

• Give your slideshow a title and description if desired
• Add as many media images as desired

Tab Group

Create a tabbed group of content that includes nesting other paragraphs within.

• Add a tab group paragraph and your first tab will automatically display with a text paragraph block within. If not desired, simply remove the text paragraph using the ‘remove’ button
• Add as many Tabs using the ‘tab’ documentation below as needed

Options

We have some options that may be used but by default it is recommended that these options including alignment, tab grow and vertical orientation only be used in very specific locations.

Individual Tab

• Your tab must have a title this is what displays as the tab title option to select between tabs
• Place other paragraphs to build out content within your tab
• You may reorder your tabs by dragging them vertically after saving

Text Block

The most common of all paragraphs and using the ckeditor 5 wysiwyg in Drupal.

• Add a text block paragraph type
• If you have any ‘advanced’ use cases such as subscript, superscript etc, select the text format as ‘FULL HTML’
• Within the options tab you can give this section a title and description as needed.
• You may change the alignment if desired

Options:

Horizontal line: this will add a horizontal line below the text.Useful for breaking up large blocks.

Animate: Adds a bit of animation on scroll, adding some visual interest especially in larger blocks.

Video

Embed a video from vimeo or youtube

• Select add media, then add the URL to your video
• under options you may give your video a title and description
• You may change the display size
• Display video information toggle → Choose to auto-populate a section near this video that will show the title and description pulled from youtube.

View

As mentioned in the Drupal and you documentation a view is a collection of content. Most users will not generally need to have access to this however, a very powerful paragraph indeed. You can simply select the view you wish to drop into your paragraph region and it will display that content.

Options

• You may add a title and description
• You may add a link title, alt, and url
  • Select if the url is external or not
  • Select if this link should display above or below your view output

Display

These options are pretty much on auto-pilot but you have plenty of options should you need to alter the default output and styles of our views to an extent. As with other items, these are more for admins to utilize and suggest not updating unless really needed.