#  Design System Components 

 



  [### 50/50 Card Component

 ](/5050-card)A 50/50 Card is a horizontal element that displays an image on one side and information on the other.



 

 

   ![Icon showing shapes of hills and the sun representing an image on one side and lines representing text on the other.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2024-11/DS%20Website%20icons%20_50-50%20Card_0.png?itok=iqEVRDXL) 

 



 

 

   [### Accordion

 ](/accordion)An Accordion component is a vertical stack of content panels that can be opened and closed.



 

 

   ![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/omnuum631/files/styles/hwp_16_9__480x270/public/2024-11/DS%20Website%20icons%20_Acccordion_0.png?itok=KF6gJQEi) 

 



 

 

   [### Button-Style Cards

 ](/button-style-cards)A Button-Style Card is a clickable card that displays an icon, link, and short description.



 

 

   ![Icon showing the cards arranged in a row, each with a home icon followed by lines representing text.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_Button%20Style%20Cards.png?itok=mOdo1oQT) 

 



 

 

   [### Call to Action Links

 ](/call-action-links)A Call to Action Link is a prominent link that includes link text and an icon.



 

 

   ![Icon showing three rectangles arranged in a row, each containing a white rectange representing text and an arrow icon.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_Call%20to%20action.png?itok=LJy18lEM) 

 



 

 

   [### Columns

 ](/columns)A Columns component is a two-column layout used to place content side by side, often for comparison or to present related information in parallel.



 

 

   ![Columns component](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-09/DS%20Website%20icons%20_Columns.png?itok=UCPR5lSK) 

 



 

 

   [### Hero

 ](/hero)A Hero component is a banner element that displays an image and information at the top of a page.



 

 

   ![Icon showing shapes of hills and the sun representing an image followed by lines representing text.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-04/Hero_1.png?itok=ZFE12pHM) 

 



 

 

   [### List Component

 ](/list-component)A List component is a dynamic content block that displays items from a specific content type, such as news, resources, or people, in a summary format and layout.



 

 

   ![Icon showing a list of rectangular cards, each with shapes of hills and the sun representing an image on the left and lines representing text on the right.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-04/DS%20Website%20icons%20_Listing.png?itok=peMfnfEe) 

 



 

 

   [### Media Gallery

 ](/media-gallery)A Media Gallery component displays a collection of media items (images, audio, video, or externally hosted media).



 

 

   ![Media Gallery Component](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-12/Media%20Gallery.png?itok=okiwYG7I) 

 



 

 

   [### Quote Card

 ](/quote-card)A Quote Card is a horizontal element that displays an image on the left side and a formatted and attributed quote on the right side.



 

 

   ![Icon showing shapes of hills and the sun representing an image on the left and a text panel starting with an open quote icon followed by lines representing text on the right.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-01/DS%20Website%20icons%20_Quote.png?itok=L-V4onDK) 

 



 

 

   [### Stats Cards

 ](/stats-cards)A Stats Card is a card that displays a data point with a short description.



 

 

   ![Icon showing three cards, each with two lines and a percent character representing data followed by lines representing text.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-02/DS%20Website%20icons%20_Stats%20Cards.png?itok=vOVy2vXQ) 

 



 

 

   [### Tabs 

 ](/tabs)A Tabs component is a set of layered content panels with tab controls to support navigation between panels.



 

 

   ![Icon showing a row of four small rectangles, each with a line representing text, followed by a wide rectangle containing lines representing text.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-02/DS%20Website%20icons%20_Tabs.png?itok=abU5DLUS) 

 



 

 

   [### Vertical Cards

 ](/vertical-cards)A Vertical Card is a vertical element that displays an image on top and information below.



 

 

   ![Icon showing three cards, each with shapes of hills and the sun representing an image followed by lines representing text.](/sites/g/files/omnuum631/files/styles/hwp_16_9__480x270/public/2025-02/DS%20Website%20icons%20_Vertical%20Cards.png?itok=0GQq2qzC)