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.
Components:
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.
Fee | Notes | Cost Per Term |
---|---|---|
Wellness Center Fee | Per semester/term | $165 |
Audiology Fee | Per 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).
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.
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.

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
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
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
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
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
"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."

"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."
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
Sample header
The header should be less than three lines high. The text field should be limited to 300 characters or less. And there should be no more than three links featured.
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
A title can go here
Logo grid component
View the Logo Grid Component Guide.
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.
statistic caption goes here
statistic caption goes here
thousand
statistic caption goes here
statistic caption

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.
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.


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.
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.

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.



Caption text for photos can be placed here.

Photo caption here
It is recommended that no more than 3 yellow button links be used in a single column
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.
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.

Carousel slide one
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc commodo ante ac ornare dignissim.

Carousel slide two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc commodo ante ac ornare dignissim.

Carousel slide three
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc commodo ante ac ornare dignissim.

Carousel slide one
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc commodo ante ac ornare dignissim.

Carousel slide two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc commodo ante ac ornare dignissim.

Carousel slide three
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc commodo ante ac ornare dignissim.
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.
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.