--- title: "Components included in the Sections UIKit" date: "2022-03-18T16:33:20+00:00" summary: "Explore the comprehensive Sections UIKit, featuring versatile components for headers, footers, and content sections. Create engaging web pages with customizable layouts, media integration, and interactive elements like cards, accordions, and sliders." image: type: "page" url: "/drupal-starter-kits/add-ons/site-studio/components-included-sections-uikit" id: "7045ed4d-d6c0-4824-adf1-3780ddee4509" --- Table of contents will be added The Sections UIKit includes a library of page section components that follow common website design patterns. The sections can be easy stacked, one upon the other to create rich content pages. Each section includes options to alter it's layout, background color and text colors. Header and footer components ---------------------------- The UIKit includes a flexible header component with a configurable menu system and optional utilities bar. It also includes a footer component.  **Header** ![85ede47c-Header.png](https://acquia.widen.net/content/0ffcb412-04a1-4a7b-8854-faad33f5de75/web/85ede47c-Header.png) **Footer** ![e71df8bd-Footer.png](https://acquia.widen.net/content/f442f947-4e5c-43c3-aba1-51d9b935ff09/web/e71df8bd-Footer.png) Featured sections ----------------- **Hero component** ![3f2eaf40-Hero-section.png](https://acquia.widen.net/content/c7f3b9fe-d73a-4df1-9712-b9d2da5d615a/web/3f2eaf40-Hero-section.png) Text sections ------------- **Text section** ![cdb36e2d-Text-section.png](https://acquia.widen.net/content/9c28a1f4-0c0d-445b-84b2-abb05c89b1f3/web/cdb36e2d-Text-section.png) **Text and text section** ![6dd2f66d-Text-and-text-section.png](https://acquia.widen.net/content/bc1fa080-cd09-4b62-bc17-9b441a0ec65c/web/6dd2f66d-Text-and-text-section.png) **Expandable text section** ![2b69fb9a-Expandable-text-section.png](https://acquia.widen.net/content/7fd5448c-1fde-4ac9-ab7f-785c527f69dc/web/2b69fb9a-Expandable-text-section.png) Media sections -------------- **Text and media section** ![33a13a9a-Text-and-media-section.png](https://acquia.widen.net/content/e9930b66-1fcb-4a71-99ea-a1c135d4e5ca/web/33a13a9a-Text-and-media-section.png) **Text and wide image section** ![9386a844-Text-and-wide-image-section.png](https://acquia.widen.net/content/39ce8f16-8b23-4d2d-b0e3-b6e640465861/web/9386a844-Text-and-wide-image-section.png) **Text over background image section** ![a7d31015-Text-over-backround-image-section.png](https://acquia.widen.net/content/a4349ce7-c544-4481-aa3a-f6e4449b9279/web/a7d31015-Text-over-backround-image-section.png) **Image section** ![f763bcca-Image-section.png](https://acquia.widen.net/content/5a6fce10-e319-42bb-b154-6cc98d75a21a/web/f763bcca-Image-section.png) **Video section** ![392cbe18-Video-section.png](https://acquia.widen.net/content/08bd7b63-ca6e-4e59-b3e9-e686bec4a777/web/392cbe18-Video-section.png) Card sections ------------- **Text and card container section** Use the Card container section to hold Card components. The image below shows an example of the Card container with nested feature card components. ![380c4737-Text-and-cards-section.png](https://acquia.widen.net/content/edf51510-ea9e-4c56-9037-2ece5ccecb1b/web/380c4737-Text-and-cards-section.png) **Card container section** Use the Card container section to hold Card components. The image below shows an example of the Card container with nested feature card components. ![eeb301f1-Cards-section.png](https://acquia.widen.net/content/81177f2d-df39-4fc9-9954-868796014b1c/web/eeb301f1-Cards-section.png) Card components --------------- **Text card** ![d7a0db1b-text-card.png](https://acquia.widen.net/content/438fa6dc-0612-477a-8655-957678a1f42d/web/d7a0db1b-text-card.png) **Image card** ![9261610e-image-card.png](https://acquia.widen.net/content/4dee1e75-522d-4101-b0d5-6ebf114f25a7/web/9261610e-image-card.png) **Feature card** ![24753309-Feature%20card.png](https://acquia.widen.net/content/0d49e39c-ce2f-45e5-b203-60d6038dc0ba/web/24753309-Feature%20card.png) **Content card** ![5c77c098-Content%20card.png](https://acquia.widen.net/content/bc006795-c571-40c1-95e4-7f907d4b26ad/web/5c77c098-Content%20card.png) **Horizontal content card** ![eef3929e-Horizontal%20content%20card.png](https://acquia.widen.net/content/e4fd27e3-96c2-4996-87a3-f077f6fade82/web/eef3929e-Horizontal%20content%20card.png) **Impact card** ![73b9d4d8-Impact%20card.png](https://acquia.widen.net/content/e7a32855-b2fe-4fbb-80bf-108d01701e52/web/73b9d4d8-Impact%20card.png) **Price card** ![80dd4a7c-Price%20card.png](https://acquia.widen.net/content/bfb1774b-91b2-42f1-b8d6-8e9a55fc35dc/web/80dd4a7c-Price%20card.png) **Profile card** ![79e6369a-Profile%20card.png](https://acquia.widen.net/content/72cbfb34-8e13-494b-a31b-7abed26d128d/web/79e6369a-Profile%20card.png) **Testimonial card** ![97760927-Testimonial%20card.png](https://acquia.widen.net/content/537aca97-9185-439a-a0ed-d19e9ffd3b7b/web/97760927-Testimonial%20card.png) **Logo card** ![8bb914d3-Logo%20card.png](https://acquia.widen.net/content/2bfa1e97-78b4-40ce-8c64-5a6421976db6/web/8bb914d3-Logo%20card.png) **Stat card** ![1755c037-Stat%20card.png](https://acquia.widen.net/content/53583cd6-a61a-43a7-b4ec-ebc24b154056/web/1755c037-Stat%20card.png) Accordion sections ------------------ **Text and accordion section** ![0d15d2e0-Text-and-accordion-section.png](https://acquia.widen.net/content/31368761-2129-4b6b-9fc5-2c52d4af53a5/web/0d15d2e0-Text-and-accordion-section.png) **Accordion section** ![e3c95e46-Accordion-section.png](https://acquia.widen.net/content/53b78447-b742-4db7-9609-119568d0f6f8/web/e3c95e46-Accordion-section.png) Tab sections ------------ **Text and tabs sections** ![1bd4da9e-Text-and-tabs-section.png](https://acquia.widen.net/content/20e6c261-5a18-4ab3-9e2d-b45a641a1a73/web/1bd4da9e-Text-and-tabs-section.png) **Tabs section** ![c116d2c2-Tabs-section.png](https://acquia.widen.net/content/590f5a7f-b603-4ea4-b564-d6fafcab55d8/web/c116d2c2-Tabs-section.png) **Vertical tabs section** ![7c161069-Vertical-tabs-section.png](https://acquia.widen.net/content/fcb03edd-74ab-4fc7-92bd-cf6b5243a2be/web/7c161069-Vertical-tabs-section.png) Slider sections --------------- **Text and slider section** ![033fa8e7-Text-and-slider-section.png](https://acquia.widen.net/content/bee07de3-88ca-4cb1-a456-1d640efe34eb/web/033fa8e7-Text-and-slider-section.png) **Slider section** ![1972764f-Slider-section.png](https://acquia.widen.net/content/dbf3547b-b0f1-4218-a6df-5e78b1590e20/web/1972764f-Slider-section.png) Map sections ------------ **Text and map section** ![9b039e51-Text-and-map-section.png](https://acquia.widen.net/content/73e88b75-4396-4614-8efa-18265a7e20ca/web/9b039e51-Text-and-map-section.png) **Map section** ![bc99c8b3-Map-section.png](https://acquia.widen.net/content/80e4e5c0-1d84-4cd3-9628-7811760e9ae6/web/bc99c8b3-Map-section.png)