# Components ## expand\_more ## 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 ](/5050-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.](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2024-08/thumb_50_50_cards.png?itok=P-dvBnqC) [### Accordion ](/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.](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2024-08/thumb_accordion.png?itok=80jVAxBS) [### Button-Style Cards ](/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.](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2024-08/thumb_button_style_cards.png?itok=CJ-SbyqZ) [### Call to Action Links ](/call-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.](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2024-08/thumb_cta_links.png?itok=H3Ii-Ran) [### Columns ](/columns)How to add a columns component and add content on each column ![Columns Thumbnail](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2026-05/thumb_columns.png?itok=qDiFt88f) [### Embed ](/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.](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2024-09/thumb_embed.png?itok=_6-tA9Xr) [### Hero ](/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.](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2024-08/thumb_hero.png?itok=T8MCF13t) [### Horizontal Rule ](/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.](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2024-09/thumb_horizontal_rule.png?itok=29wnBg4t) [### Image ](/image)How to add a single image component and edit its crop settings. ![Image component](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2026-05/thumb_image.png?itok=1wK3yPdC) [### Image Collage ](/images)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.](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2024-09/thumb_images.png?itok=KntoV5eE) [### List Component ](/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.](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2024-09/thumb_list.png?itok=HrEyi4F2) [### Media Gallery ](/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](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2025-12/media-gallery-thumbnail.png?itok=8ALT2Eiw) [### Quote Cards ](/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.](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2024-08/thumb_stats_cards.png?itok=yFar2Eu6) [### Stats Cards ](/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.](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2024-08/thumb_stats_cards.png?itok=yFar2Eu6) [### Tabs ](/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.](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2024-09/thumb_tabs.png?itok=_QPPq3lu) [### 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.](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2024-09/thumb_text_0.png?itok=H9_ivmza) [### Vertical Cards ](/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.](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2024-08/thumb_stats_cards.png?itok=yFar2Eu6) [### Video ](/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.](/sites/g/files/omnuum1651/files/styles/hwp_scale_small/public/2024-09/thumb_video.png?itok=e-m_kxRS)