Components to Highlight Information
Choose the color palette in the left column that matches the one used on your site to see how these Components will look when you incorporate them into your pages.
Jump to:
Color Bands
Cardinal
Gray
Light
The four bars above are examples of Color Bands. They can be used to break up long sections of text or group sections of information together. Color Bands generally include text, but can also be used without. The first example that reads "Color Bands" displays a full-width Color Band in the default color. "Default" in this case refers to the color that will be automatically selected based on your site's theme and color palette. The second example is cardinal, and the third is gray. A final example that contains no text is shown in the light color option.
Callout Boxes
This is a callout box. It floats to the left or right and MUST be placed above a Text Area component.
Callout Boxes can have several formats. The box to the left is the most basic way a Callout Box can be formatted. This example is text-only, with no special typography styling. It is left-aligned and in the default callout style.
As you can see, when no special formatting is used and the default callout style is selected, the text blends in with the rest of the page. The information included isn't highlighted in a way that pops out to your readers. However, the text in the Text Box that follows will wrap around the Callout Box as demonstrated here.
This is a callout box. It floats to the left or right and MUST be placed above a Text Area component.
The example to the left is exactly the same as the one above, except that the callout style is set to "well."
As you can see, adding in a background allows your content to pop out at your readers. This is a great way to highlight a bit of important information or just to break up a long area of text. As in the prior example, the text in the Text Box that follows will wrap around the Callout Box as demonstrated here.
A callout box can also have images.
This next example of a Callout Box is left aligned with "well" callout style. It uses an image and lead text typography styling.
Play around with Callout Boxes! They can be formatted in a variety of ways to highlight information in creative, eye catching ways.
This is another callout box.
In this final example, the box is right-aligned and uses a block quote text styling. This example uses the default callout style, which means there is no shadow or box around the callout section, but the use of special typography allows the content to pop out at the reader.
Inserting a quote in this manner saves space compared to adding a Testimonial component. The Callout Box tucks the quote to the left or right of the page and allows the Text Area that follows to wrap around it, rather than displaying the quote across most of the page with subsequent text below.
Accordions
This is an accordion. It expands when you click on the title bar
Text within an accordion can be formatted using any of the toolbar options, including bulleted or numbered lists, block quotes, or different styles of typography.
This Component has a variety of uses. They are most commonly used for FAQ, but also can be used for different academic subplans (e.g. B.S. degree subplan 1; B.S. degree suplan 2) or different areas within a major (e.g. core requirements; elective requirements).
Accordions are great for saving space on your page, as they default to the collapsed position when a user visits your page. You have the ability to give your users the option to expand/collapse all. This is done by clicking the "Add Expand/Collapse All" checkbox at the top of the Accordion Component.
You can have multiple
Here's a second Accordion. They stack on top of each other.
There are multiple styling options. This is the Secondary style.
The styling is the same as that of a secondary button link, whereas the Default style (above) displays similarly to a primary button link.
There are multiple styling options. This is the Light style.
The styling may vary by color palette.
This is the same Vertical Timeline, Collapsed by Default
Timeline Item 1
Subheadings are optional and appear in italics
Vertical Timelines can showcase a variety of information:
- Steps in a process or procedure. Each step would be its own timeline item, and the details and instructions would be included in the description.
- Degree requirements. Each category of requirement (e.g. core courses, electives, capstone, etc.) would be its own timeline item, with the specific courses or requirements explained in the description.
- How to declare a major or submit an application.
- Provide a list. Examples include a list of award winners, publications, or important dates.
Add as many different items to your timeline as needed
Additional text in the description is optional!
Additional Timeline Item 2
The description area can include different styles of typography by using the option in the toolbar above the text box.
Example: Bold text with center alignment.
Breakout Box for REALLY important information, such as a deadline.
Spotlight(s)
Spotlight(s) can be tall or short. They can include an image that can be right- or left-aligned. They can also include a link, which appears as a secondary button. There are currently two design styles for Spotlight(s): Classic and Expanded. Multiple items can be added to spotlight(s), and users can scroll through them.
Spotlight(s) are a great way to highlight news or new publications. They can also be used to break up long sections of text, or as headings to introduce different areas within a degree program (e.g. different subplans).
Tall Spotlight Right-aligned, Default color, Classic style
Content in a Spotlight is limited. Tall Spotlights allow 125 words (~625 characters) and Short Spotlights allow 60 words (~300 characters).
Text formatting options are more limited in a Spotlight than in a Callout Box or other Component types. Options include bulleted or numbered lists, a vertical line, or bold/italic text.
Tall Spotlight Left-aligned, Gray color, Expanded style
Content in a Spotlight is limited. Tall Spotlights allow 125 words (~625 characters) and Short Spotlights allow 60 words (~300 characters).
Text formatting options are more limited in a Spotlight than in a Callout Box or other Component types. Options include bulleted or numbered lists, a vertical line, or bold/italic text.
Short Spotlight left-aligned, gray background, Classic style
Short Spotlight left-aligned, gray background, Classic style
This is a Short Spotlight(s) with two items. Users can scroll between them.
Short Spotlight left-aligned, gray background, Expanded style
Short Spotlight left-aligned, gray background, Expanded style
This is a Short Spotlight(s) with two items. Users can scroll between them.
A testimonial gives a personalized touch to your content. You can include an optional image and/or link to more information. The quote can be top aligned (as it is here) or bottom aligned.
This is a sample Testimonial that is bottom aligned.
Developer's Catalog (formerly called View)
A Developer's Catalog is a component which the H&S web team will use to build some events, news, courses, people and publication pages. You can ignore it!
We are also constantly growing the platform and adding new functionality. New features will continue to appear in your dropdown.
Resources
Additional information, including step by step instructions for using the Components shown above can be found in our Drupal 9 Wiki Guide: