Drupal Layout Guide

Overview

The objective of this page is to show what each paragraph type looks like on the front and back end within the Drupal CMS. "Paragraph type" refers to the different elements that we have available to organize our content. Think about it like paragraphs or sections within an essay.

Keeping the content on pages balanced increases the readability. A small exercise that can help improve the layout of any page is to imagine each 

WYSIWYG

This paragraph type is the WYSIWYG ("What You See Is What You Get"). It's the most basic paragraph type available, and only has a text editor feature to it.

A Few Notes

Many of the paragraph types that you will see below have overlapping features for consistency. Here are some universal notes to keep in mind:

  • CTA = Call to Action. This is text that directs a user toward a specific action and usually is accompanied by link (e.g. "Apply Now")
  • Some content types have required fields that need to be filled before the page can be saved. For example, the Image Feature must have an image selected before it can be saved, so content authors will have to identify their photos to marketing before this paragraph type can be entered.
  • Section Headers are optional, although they are encouraged to help users scan through the page.
  • You may notice that a number sign (#) is entered in the link/URL field on the back end. This is only for display purposes here to show the functionality on the front end. Leaving a number sign (#) in the link field will cause the page to reload when a user clicks the link on the front end.
  • Several paragraph types have an "Intro" section. These are optional, but can be helpful to provide some context.
  • At the end of the page, there is a checkbox for "Show Footer CTAs." On the front end, this checkbox displays the "Make it happen" graphic, which should only be used for pages that directly encourage the user to apply to HCC. In other words, pages that are primarily informative about a service or resource at the college should not use this feature.

Headline H2

Headline H3

HEADLINE H4

Headline H5
HEADLINE H6

Button Style

The Button Style stretches across the page width. Because of this, it can break up the flow of the page, so it's used sparingly

Small Button Style

The Small Button Style is preferable 95% of the time as it calls attention to the CTA, but doesn't detract from the flow of the page.

Image Feature

Installation of Roberta Schofield's "On Edge" exhibition.

Slide Header

This is a caption for an image. The Carousel: Image Feature is good for showing wide images compared to the Carousel: Image Standard. This is where you can have visual highlights to key selling points for your service or department.

Installation view of My Story My Truth

Another Slider Header

One thing to note is that these image carousels don't automatically scroll through the slides like on the HCC homepage.

Carousel: Standard

Installation of Antigua Colonia, Chistes Viejos exhibition

Image Title

Image Subtitle

This body field is required for the Carousel: Standard. This paragraph type does have a responsive feature for CTA links

Generic Block: 3 Columns

The Generic Block: 3 Columns layout helps to provide a more dynamic structure to display content than a WYSIWYG.

Installation of Tidewater Elegy exhibition

Title Column 1

Subtitle

In general, there should only be a few sentences worth of text in each column. Putting too much text will create long, narrow columns (similar to a newspaper), which lessens the readability on the web.

Installation of Ashley Ortiz's "False Space, No Shadow" exhibition.

Title Column 2

Subtitle

At the moment, all three columns must have content in them because the titles and body areas are required fields. This means that you cannot use two columns and leave the third column blank. To use this paragraph type, you will have to plan your content in groups of three.

Installation view of The Color of Remembering

Title Column 3

Subtitle

Subtitles are optional in this paragraph type, but they are help in particular circumstances. For example, a sponsoring department

Section CTA Link

Generic Block: 2 Columns

Note: It's not advised to mix a Generic Block: 3 Column with a Generic Block: 2 Column. Switching from 3 Columns to 2 Columns (or vice versa) breaks the flow of the content. It improves the readability to use the same paragraph type.

Generic Block Title 1

Subtitle Example

In general, there should only be a few sentences worth of text in each column. Putting too much text will create long, narrow columns (similar to a newspaper), which lessens the readability on the web.

Generic Block Title 2

Similar uses to the Generic Block: 3 Columns

  • List Item 1
  • List Item 2

CTA Button

Generic Block: List

If you have more than 3 blocks, you can use the Generic Block: List to add more than 3.

  • Generic Block 1

    Subtitle Example

    While bold text can be helpful, it should be used sparingly. When more than two or three words are bolded, it becomes difficult to read and scan. As a result, the purpose of the bold text is made moot, rather than providing the desired emphasis.

    The same is true for italics.

  • Generic Block 2

    Department of Magic

    Subtitles are good for listing a building name, sponsoring department or organization, etc.

Contact Information with CTA

CTA Link Text

Meet with an academic advisor at the campus nearest you.

This paragraph type only allows one contact to be listed.

Contact Information: Rows

Contact Information: Rows allows multiple contacts to be listed. The information displayed is pulled directly from Colleague, which is administered by Human Resources. There is no way to edit the phone numbers, position titles, etc. in Drupal.

CTA Feature: 2 Up Grid

Grid Block 1

If you choose to have a background image, it should be dark since the text color is light. Without a background image, it will display a white background with navy blue text.

Grid Block 2

Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur aliquet quam id dui posuere blandit.

Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur aliquet quam id dui posuere blandit.

Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur aliquet quam id dui posuere blandit.

CTA Feature: Buttons Only

This is a great option to organize a set of up to 1–3 links that provide a call to action. Usually, this paragraph type is used to connect the page visitor to related pages on the site.

Related Page 1
Related Page 2
Related Page 3

Statistics

11%
of people are left handed
100%
breathe air
45k
students enrolled last year