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.
Accordion
How to add an Accordion component with stacked vertical panels containing content and components and controls to show or hide panels.
Button-Style Cards
How to add a set of Button-Style Cards, each with an icon on top followed by information.
Call to Action Links
How to add prominent Call to Action Links with formatting options including arrow icons.
Columns
How to add a columns component and add content on each column
Embed
How to embed content from other sources, such as Google Maps and Qualtrics, directly on a page.
Hero
How to add a Hero banner with a background image and information in a text overlay.
Horizontal Rule
How to add a Horizontal Rule as a divider, to separate blocks of content.
Image
How to add a single image component and edit its crop settings.
Image Collage
How to add an Images component to provide captioned images in different layouts.
List Component
How to add a list component to display a summary list for different content types, such as news, events, publications, or resources.
Media Gallery
How to add images and display them as a media gallery on your site.
Quote Cards
How to add a Quote Card with an image on the left and a formatted and attributed quote on the right.
Stats Cards
How to add a set of Vertical Cards, each with an image on top followed by information in a text panel.
Tabs
How to add a Tabs component with multiple tab panels containing content and components and controls to navigate between them.
Text
How to add a Text component to provide blocks of formatted text, images, and links.
Vertical Cards
How to add a set of Vertical Cards, each with an image on top followed by information in a text panel.
Video
How to add a Video component to embed video content from YouTube and Vimeo directly on a page.