Components

Working with layout and list components

HarvardSites Drupal provides a range of components for use in building page layouts and showcasing website content. This section provides instructions on how to use each component and best practices to keep in mind.

Components library

50/50 Cards

How to add a 50/50 Card with an image on one side and information in a text panel on the other side.

Icon showing two cards stacked with alternating outlines representing an image and lines representing text.

Accordion

How to add an Accordion component with stacked vertical panels containing content and components and controls to show or hide panels.

Icon showing a rectangle with multiple lines representing text and an up-pointing arrow, followed by two rectangles each with a line representing text and a down-pointing arrow.

Button-Style Cards

How to add a set of Button-Style Cards, each with an icon on top followed by information.

House icon followed by lines representing text.

Call to Action Links

How to add prominent Call to Action Links with formatting options including arrow icons.

 Icon showing rectangular button outline and a smaller rectangle with a right-pointing arrow.

Columns

How to add a columns component and add content on each column

Columns Thumbnail

Embed

How to embed content from other sources, such as Google Maps and Qualtrics, directly on a page.

Icon showing a square containing a diagonal down-pointing arrow overlaid with a smaller square containing a pair of empty angle brackets.

Hero

How to add a Hero banner with a background image and information in a text overlay.

Icon showing outlines representing an image followed by lines representing text.

Horizontal Rule

How to add a Horizontal Rule as a divider, to separate blocks of content.

Icon showing two centered horizontal lines, the second narrower than the first.

Image

How to add a single image component and edit its crop settings.

Image component

Image Collage

How to add an Images component to provide captioned images in different layouts.

Icon showing a grid, with a vertical rectangle with outlines representing an image on the left and two smaller stacked rectangles, each with outlines representing an image, on the right.

List Component

How to add a list component to display a summary list for different content types, such as news, events, publications, or resources.

Icon showing a list of three elements, each with outlines representing an image on the left and lines representing text on the right.

Media Gallery

How to add images and display them as a media gallery on your site.

an icon that represents a grid layout with photos

Quote Cards

How to add a Quote Card with an image on the left and a formatted and attributed quote on the right.

Icon showing three consecutive cards, each with icons representing data on top followed by lines representing text.

Stats Cards

How to add a set of Vertical Cards, each with an image on top followed by information in a text panel.

Icon showing three consecutive cards, each with icons representing data on top followed by lines representing text.

Tabs

How to add a Tabs component with multiple tab panels containing content and components and controls to navigate between them.

Icon showing a folder-shaped outline with a prominent tab and two others and lines representing text.

Text

How to add a Text component to provide blocks of formatted text, images, and links.

Icon showing a page-shaped outline with lines representing text.

Vertical Cards

How to add a set of Vertical Cards, each with an image on top followed by information in a text panel.

Icon showing three consecutive cards, each with icons representing data on top followed by lines representing text.

Video

How to add a Video component to embed video content from YouTube and Vimeo directly on a page.

Icon of a video player showing a filmstrip and play button and a playback slider.

Support and feedback options for HarvardSites Drupal

Submit a ticket

If you encounter any issues or bugs with the HarvardSites Drupal platform, please submit a ticket through the HUIT Service Desk.

Share website feedback

If you have ideas for how to improve the HarvardSites User Guide website, please submit your ideas using our website feedback form.

Design System How-To Guides

Practical guides and how-tos for using HarvardSites features to build engaging, effective websites that support your department’s goals.

AI Support chatbot

Try our new AI-powered support chatbot to answer questions about the Drupal platform.