The purpose of this guide is to provide best practices for layout for the Pacific.edu website. Use this handy guide to get some insight as to what components are available and the best way of using them.

Page headers

The two pages linked below are examples of how images should be used in page headers. In general, pages should use "overflow" images rather than "contained" images. The overflow image pushes the right margin of the body text to the left and keeps text line lengths shorter on desktop screens. This makes the text easier to read. 

 

Header text should be as short as possible. Three lines is the ideal maximum length for header text.

Text fields/WYSIWYG

Text fields should utilize headers to break up sections of information. These are the headers that should be used:

Header 2 

Header 3

Header 4

Header 5

 

Tables can also be used to organize information, but should only be used sparingly. Tables should be no more than three columns wide, or they will be cut off on mobile devices. 

The table below has styling applied to the source code to add background color and make it 100% width. This is the styling that should be used on tables. The web team can assist in adding these styles to tables.  

Fee Notes Cost Per Term
Wellness Center Fee Per semester/term $165
Audiology Fee Per semester/term $400

Classic Text fields/WYSIWYG

This text editor does not take up the full width of the page; it should be used in limited cases, such as at the top of a page where the image in the header is set to display vertically ("overflow"). 

Text fields should utilize headers to break up sections of information. These are the headers that should be used:

Header 2 

Header 3

Header 4

Header 5

 

Tables can also be used to organize information, but should only be used sparingly. Tables should be no more than three columns wide, or they will be cut off on mobile devices. 

The table below has styling applied to the source code to add background color and make it 100% width. This is the styling that should be used on tables. The web team can assist in adding these styles to tables.  

FeeNotesCost Per Term
Wellness Center FeePer semester/term$165
Audiology FeePer semester/term$400

Spacer component

The spacer component is useful for increasing and reducing space between components when components need to be in closer proximity to each other to indicate a relationship. The screenshots below illustrate this.

The WYSIWYG and the accordion below have related information, and should look like they are part of a unit. The spacer component has been used to reduce the amount of space between them. There is also a spacer component between the accordion and the orange link component to increase the space between them. Without it, the accordion is closer in proximity to the orange link component, and may be visually confusing. 

There is a spacer between this text and the two column component below, for reference. It has reduced the space by 50 pixels (-50px).

Example: spacers used

facebook banner

Example: no spacers

facebook banner

Content reference component

The Content Reference component allows you to select and display content that exists in an already-created "Component Content Reference" content item. The benefit of this is that if you want to display the same information in the same component on multiple pages on the website—for example, clinic hours—you can do so and only have to make edits in one place. 

The "Component Content Reference" content type allows you to create a single component. Once you have created the component you want to use and saved the content item, you can go to the pages where you would like it to appear. Edit those pages, insert a Content Reference component where you want it to appear, and then use the component to select the content item you created.

When you want to edit the component that you have added using the Content Reference component, you will need to find the "Component Content Reference" content item that you created, and edit that. When you save your edits to the "Component Content Reference" content item, all of the pages that contain the Content Reference component referencing that content item will display the updated content. (You might have to reload the page to make the updated content appear.) 

Content accordion component

The accordion component has two background color options, blue and gray. The blue background should be used in accordions that have three or less expandable sections. The grey background should be used on accordions with more than three expandable sections. In general, accordion components should not be overly-long, or used for FAQ pages. If the accordion component has more than seven expandable sections, or has a large amount of content, consider using a WYSIWYG or putting the information on it's own page instead. 

The title text for accordions should be sentence case, and fit on one line in desktop view.  There is an optional accordion headline for groups of accordions. 

Optional Header

Duis enim arcu, blandit eu lorem at, viverra porttitor nunc. Suspendisse potenti. Donec vel odio non velit fringilla varius vitae vitae nulla. Duis in dictum turpis, in pharetra diam. Nullam lacinia efficitur pretium. Nunc vulputate felis in facilisis efficitur. In rhoncus, velit eget posuere ultrices, tortor velit hendrerit lorem, a viverra magna risus id nibh.

  • Enim arcu, blandit eu lorem at, viverra porttitor nunc. Suspendisse potenti.
  • Aspendisse potenti. Donec vel odio non velit fringilla varius vitae vitae nulla.

Duis enim arcu, blandit eu lorem at, viverra porttitor nunc. Suspendisse potenti. Donec vel odio non velit fringilla varius vitae vitae nulla. Duis in dictum turpis, in pharetra diam. Nullam lacinia efficitur pretium. Nunc vulputate felis in facilisis efficitur. In rhoncus, velit eget posuere ultrices, tortor velit hendrerit lorem, a viverra magna risus id nibh.

  • Enim arcu, blandit eu lorem at, viverra porttitor nunc. Suspendisse potenti.
  • Aspendisse potenti. Donec vel odio non velit fringilla varius vitae vitae nulla.

Optional Header

Duis enim arcu, blandit eu lorem at, viverra porttitor nunc. Suspendisse potenti. Donec vel odio non velit fringilla varius vitae vitae nulla. Duis in dictum turpis, in pharetra diam. Nullam lacinia efficitur pretium. Nunc vulputate felis in facilisis efficitur. In rhoncus, velit eget posuere ultrices, tortor velit hendrerit lorem, a viverra magna risus id nibh.

  • Enim arcu, blandit eu lorem at, viverra porttitor nunc. Suspendisse potenti.
  • Aspendisse potenti. Donec vel odio non velit fringilla varius vitae vitae nulla.

Duis enim arcu, blandit eu lorem at, viverra porttitor nunc. Suspendisse potenti. Donec vel odio non velit fringilla varius vitae vitae nulla. Duis in dictum turpis, in pharetra diam. Nullam lacinia efficitur pretium. Nunc vulputate felis in facilisis efficitur. In rhoncus, velit eget posuere ultrices, tortor velit hendrerit lorem, a viverra magna risus id nibh.

  • Enim arcu, blandit eu lorem at, viverra porttitor nunc. Suspendisse potenti.
  • Aspendisse potenti. Donec vel odio non velit fringilla varius vitae vitae nulla.

Duis enim arcu, blandit eu lorem at, viverra porttitor nunc. Suspendisse potenti. Donec vel odio non velit fringilla varius vitae vitae nulla. Duis in dictum turpis, in pharetra diam. Nullam lacinia efficitur pretium. Nunc vulputate felis in facilisis efficitur. In rhoncus, velit eget posuere ultrices, tortor velit hendrerit lorem, a viverra magna risus id nibh.

  • Enim arcu, blandit eu lorem at, viverra porttitor nunc. Suspendisse potenti.
  • Aspendisse potenti. Donec vel odio non velit fringilla varius vitae vitae nulla.

Duis enim arcu, blandit eu lorem at, viverra porttitor nunc. Suspendisse potenti. Donec vel odio non velit fringilla varius vitae vitae nulla. Duis in dictum turpis, in pharetra diam. Nullam lacinia efficitur pretium. Nunc vulputate felis in facilisis efficitur. In rhoncus, velit eget posuere ultrices, tortor velit hendrerit lorem, a viverra magna risus id nibh.

  • Enim arcu, blandit eu lorem at, viverra porttitor nunc. Suspendisse potenti.
  • Aspendisse potenti. Donec vel odio non velit fringilla varius vitae vitae nulla.

Duis enim arcu, blandit eu lorem at, viverra porttitor nunc. Suspendisse potenti. Donec vel odio non velit fringilla varius vitae vitae nulla. Duis in dictum turpis, in pharetra diam. Nullam lacinia efficitur pretium. Nunc vulputate felis in facilisis efficitur. In rhoncus, velit eget posuere ultrices, tortor velit hendrerit lorem, a viverra magna risus id nibh.

  • Enim arcu, blandit eu lorem at, viverra porttitor nunc. Suspendisse potenti.
  • Aspendisse potenti. Donec vel odio non velit fringilla varius vitae vitae nulla.

Duis enim arcu, blandit eu lorem at, viverra porttitor nunc. Suspendisse potenti. Donec vel odio non velit fringilla varius vitae vitae nulla. Duis in dictum turpis, in pharetra diam. Nullam lacinia efficitur pretium. Nunc vulputate felis in facilisis efficitur. In rhoncus, velit eget posuere ultrices, tortor velit hendrerit lorem, a viverra magna risus id nibh.

  • Enim arcu, blandit eu lorem at, viverra porttitor nunc. Suspendisse potenti.
  • Aspendisse potenti. Donec vel odio non velit fringilla varius vitae vitae nulla.

Duis enim arcu, blandit eu lorem at, viverra porttitor nunc. Suspendisse potenti. Donec vel odio non velit fringilla varius vitae vitae nulla. Duis in dictum turpis, in pharetra diam. Nullam lacinia efficitur pretium. Nunc vulputate felis in facilisis efficitur. In rhoncus, velit eget posuere ultrices, tortor velit hendrerit lorem, a viverra magna risus id nibh.

  • Enim arcu, blandit eu lorem at, viverra porttitor nunc. Suspendisse potenti.
  • Aspendisse potenti. Donec vel odio non velit fringilla varius vitae vitae nulla.

Expandable links component

This component is useful if you have a list of links that you'd like to include non-obtrusively. You can't include descriptive text in this component (only a title and the individual link texts). 

Multi-column text grid component

Multi-column text grids are used for creating a 2-3 column text layout for desktop views. These columns of text will stack in mobile view. This component should not be used for a single column of text.

Multi-column text grids look visually more balanced when each text section has similar amounts of text, so it is strongly recommended to use similar title character counts and paragraph character counts. If similar character counts are not possible, it is better to use a WYSIWYG. 

This is a sample title

Proin tincidunt sem tempus, varius urna at, feugiat massa. Cras eu tortor consequat, volutpat dui vel, pellentesque ligula. Etiam mollis dictum diam nec laoreet. Sed rhoncus at lectus et congue. Cras aliquam arcu vel velit tincidunt semper. In id interdum nulla.

Sample title 2

Proin tincidunt sem tempus, varius urna at, feugiat massa. Cras eu tortor consequat, volutpat dui vel, pellentesque ligula. Etiam mollis dictum diam nec laoreet. Sed rhoncus at lectus et congue. Cras aliquam arcu vel velit tincidunt semper. In id interdum nulla. Ded rhoncus at lectus et congue.

This is a sample title

Proin tincidunt sem tempus, varius urna at, feugiat massa. Cras eu tortor consequat, volutpat dui vel, pellentesque ligula. Etiam mollis dictum diam nec laoreet. Sed rhoncus at lectus et congue. Cras aliquam arcu vel velit tincidunt semper. In id interdum nulla.

Sample title 2

Proin tincidunt sem tempus, varius urna at, feugiat massa. Cras eu tortor consequat, volutpat dui vel, pellentesque ligula. Etiam mollis dictum diam nec laoreet. Sed rhoncus at lectus et congue. Cras aliquam arcu vel velit tincidunt semper. In id interdum nulla. Ded rhoncus at lectus et congue.

Sample title three

Nulla facilisi. Nam facilisis tellus nec suscipit porta. Praesent feugiat nibh quis justo porttitor dictum. Cras malesuada semper mi a posuere. Quisque at turpis ac velit ornare ultrices ac eu arcu. Donec blandit malesuada vestibulum. Quisque congue, est sed efficitur hendrerit, erat erat scelerisque metus, et finibus orci neque a elit.

Light gray background example

This component contains a field for customizing the background color.

Sample title 2

Proin tincidunt sem tempus, varius urna at, feugiat massa. Cras eu tortor consequat, volutpat dui vel, pellentesque ligula. Etiam mollis dictum diam nec laoreet. Sed rhoncus at lectus et congue. Cras aliquam arcu vel velit tincidunt semper. In id interdum nulla. Ded rhoncus at lectus et congue.

Sample title three

Nulla facilisi. Nam facilisis tellus nec suscipit porta. Praesent feugiat nibh quis justo porttitor dictum. Cras malesuada semper mi a posuere. Quisque at turpis ac velit ornare ultrices ac eu arcu. Donec blandit malesuada vestibulum. Quisque congue, est sed efficitur hendrerit, erat erat scelerisque metus, et finibus orci neque a elit.

Multi-column text grid and images component

As shown below, the size of the image displayed depends on the number of columns used. 

University of the Pacific

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Link
University of the Pacific

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Link
University of the Pacific

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Link
University of the Pacific

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Link
University of the Pacific

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Link

Quote grid component

This component provides a more stylized way of displaying photos and text. It is particularly well suited to featuring quotes with accompanying headshots. 

The photo is the required field in this component. 

Powercat

"Magna ac placerat vestibulum lectus mauris ultrices eros. A condimentum vitae sapien pellentesque habitant morbi tristique senectus. Vulputate mi sit amet mauris commodo. Varius duis at consectetur lorem donec massa sapien faucibus et. Non nisi est sit amet facilisis magna."

-
Powercat
Powercat

"Orci ac auctor augue mauris augue neque. Faucibus purus in massa tempor nec feugiat nisl pretium fusce. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc vel. Nunc non blandit massa enim nec dui nunc mattis. Enim nunc faucibus a pellentesque sit."

-
Powercat

Multi-column highlights component

This component is used to highlight important facts. It is most often used on academic program pages to draw attention to unique/compelling aspects of the program. It can display anywhere from 1-3 columns of text, but it is recommended to use at least 2 columns. The recommended character count for each column is 60 characters or less, including spaces. 

The background color options are yellow and orange. 

At vero eos et accusamus et iusto odio dignissimos ducimus

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Sed ut perspiciatis unde omnis iste natus

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Sed ut perspiciatis unde omnis iste natus

Title, text and links component

This component is another option for featuring text with links. The content is shorter than in a two-column component.

Two column link list component

This component provides another option for displaying a list of links. You can put titles over both columns, one column or neither. There are two formatting options for this component; there is a checkbox above the component fields that allows you to display the alternate formatting (shown in the second example). 

Two Column List + Links

Logo grid component

View the Logo Grid Component Guide.  

University of the Pacific
University of the Pacific
University of the Pacific
University of the Pacific

Headshot list component

This component allows you to add a curated group of directory cards to any location on a page. This operates very simply--you just select the names of the individuals you would like to display. 

Staff/faculty list component

This component allows you to display individuals' photos, names, phone numbers, email addreses and bios fairly compactly on a page. To display individuals' information, you just select their names when editing the component. 

Elizabeth Orwin
Mehdi Khazaeli
Abel Fernandez
Camilla Saviz
Return to list

Quick facts component

The purpose of the quick facts component is to feature numerical data/statistics. No more than four facts should be used in a single quick facts component. It will be displayed in a row on desktop screens. On mobile screens, the row is condensed into a carousel that the user can tap and drag to view each statistic.

It is also recommended that the numbers are limited to 3 digits. If they are longer, the number will get cut off or overlap in smaller screens.

 

Two-column component

The two-column component has many options for layout. Text, buttons, photos, and video can be used. There are several background color options as well. 

Do not put spacers between two-column components, as it leaves blank white spaces between components on mobile view. 

Calaveras Hall
Two-column component
Text and photo/video

Only one photo or video should be used in a single column, with rare exceptions. 

The amount of text used should not be overly long, so that the height of the text box is smaller or approximately the same size as the height of the adjoining photo. And there should only be 1-2 text links with arrow in this layout. 

Two-column component
Alternating between left and right

When using multiple two-column components with images and text on a page, it is recommended that the image and text alternate between left and right columns, so that the layout looks balanced and draws the viewer's eye down the page on desktop screens

student sitting on lawn
students walking by Knoles Hall
Two-column component
Lorem ipsum dos emet

Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.

Two-column component
Autem quibusdam et

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

students sitting outside

Other two-column component layouts

  • The two-column component can be used to feature photos side-by-side, with or without text. If using text, please use the white background option. 
  • Two column-components can feature yellow buttons or photo buttons, with or without accompanying text. Please do not use more than three button links in a single column.
chemistry student
art student painting
student teacher

Caption text for photos can be placed here.

pharmacy students

Photo caption here

Call to Action

It is recommended that no more than 3 yellow button links be used in a single column

New two-column callout

subtitle
Testing New Two Column Callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

subtitle
Testing video in new two column callout

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Carousel component

Carousel components should be used for displaying multiple photos with titles and captions. The purpose of a carousel is to display a slideshow of images. They should not be used to convey important information, as the user may not click through and see it.

The ideal length for the title field is 25 characters including spaces. The ideal length for the caption field is 100 characters including spaces. It is important to keep these character limits on this component, as it affects the user experience. 

Photos for the carousel component should be horizontally formatted, and should be cropped appropriately in the page editor. The photos can either be positioned on the left or the right of the text box. 

It is recommended that no more than 7 slides are used per carousel.

The Carousel component includes an alternate "continuous carousel" display option, which can be selected at the top of the component. The following carousel is a duplicate of the above carousel, with the display mode sent to "continuous carousel." 

Resource Space (RS) carousel component

The Website Resources SharePoint site contains a helpful guide to the Resource Space carousel component

If you have difficulty making the carousel appear on the page you're editing, please submit a web request or make a request using the Website Editors-Producers Teams channel. 

Image with caption component

This component is functionally a large call-to-action component. The link and link text fields are required, which means that this can never just display an image--it must also display a link. 

Note: This component's not-required subtitle/category field doesn't display. 

Full-width video component

This component allows you to embed a video at a large size. The required fields are headline, photo (to display before the video plays), and a YouTube link. 

Welcome to Stockton!

Call to action component

The call to action component should be used for short, single sentences. They may be used with or without a link. The recommended length is no more than 75 characters, including spaces. Single words may be highlighted for emphasis using the underline tool in the text editor. Highlighting multiple words is not recommended. Background color options are gray or orange.

This is a sample underlined call to action with a gray background and link.

Sample underlined call to action with an orange background and link.

View component

The View component also lets you choose information to display on a page. The type of information it displays are Drupal "views," which is to say aggregations of data that are designed to be displayed in particular ways. This could include news or event information, among other possibilities. 

This should only be used with the guidance of Strategic Communications staff, however; not all views that exist are configured to display elegently on the website. Furthermore, views are usually designed for a particular use-case, and so should only be displayed where intended. 

The featured news and events sections of pacific.edu/alumni are examples of viewed added to a page using this component.