--- title: "Components included in the UIKit" date: "2020-11-05T16:13:39+00:00" summary: "Explore the comprehensive UIKit component library for Site Studio. Discover layout, basic, card, slider, accordion, tab, and map components to create versatile and engaging website designs effortlessly." image: type: "page" url: "/drupal-starter-kits/add-ons/site-studio/components-included-uikit" id: "2b3725c6-518b-4fea-8b32-d25fddf1b729" --- Table of contents will be added The UIKit includes a library of components that can be combined in almost infinite combinations to create the content and layout your site needs. In addition to the components shown below, the UIKit includes a library of 'Helpers,' which combine the components into common website patterns. [See the Helpers included.](/drupal-starter-kits/add-ons/site-studio/uikit-helpers-common-layouts "UIKit helpers for common layouts") 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) Layout components ----------------- Layout components provide the structure of your pages. Each component includes configuration options, some examples of which are shown below. **1 column layout component** ![6d8635cf-1%20column%20layout.png](https://acquia.widen.net/content/beaa5db8-e2dd-4b6b-8a5e-e0c7f041c3e7/web/6d8635cf-1%20column%20layout.png) _Configuration examples_ ![cb75ee7b-1%20column%20configuration%20examples.png](https://acquia.widen.net/content/3f54db62-34e1-438e-9710-1010254a6eed/web/cb75ee7b-1%20column%20configuration%20examples.png) **2 column layout component** ![def3a073-2%20column%20layout.png](https://acquia.widen.net/content/ad7957e6-16da-44bb-8936-2be40abb2a55/web/def3a073-2%20column%20layout.png) _Configuration examples_ ![a2ca03e0-2%20column%20configuration%20examples.png](https://acquia.widen.net/content/d2b50780-7c9f-4039-84f0-25f8bee7b076/web/a2ca03e0-2%20column%20configuration%20examples.png) **3 column layout component** ![f56d570c-3%20column%20layout.png](https://acquia.widen.net/content/465afb81-2eaf-48dd-b9dd-7485ccf2a527/web/f56d570c-3%20column%20layout.png) _Configuration examples_ ![60afb37a-3%20column%20configuration%20examples.png](https://acquia.widen.net/content/6cfaeca4-473f-463a-a5fb-ac14106decde/web/60afb37a-3%20column%20configuration%20examples.png) **4 column layout component** ![35756195-4%20column%20layout.png](https://acquia.widen.net/content/68aa33be-8edd-4a79-9911-87512b88f146/web/35756195-4%20column%20layout.png) **Custom layouts with Row and Column component** ![d743b2db-custom-layout.png](https://acquia.widen.net/content/a2f1e912-e99f-4361-a70e-71056f00b3a6/web/d743b2db-custom-layout.png) **Divider line component** ![c76be34d-Divider.png](https://acquia.widen.net/content/a3888de1-16c4-4910-9814-290c361f63b7/web/c76be34d-Divider.png) **Modal component** ![3af4a790-modal.png](https://acquia.widen.net/content/3b2094d2-5050-4c32-ad3a-02795ae6f93d/web/3af4a790-modal.png) Basic components ---------------- **Heading component** ![11a658a0-Heading.png](https://acquia.widen.net/content/1f84d8c9-af69-4f86-83cf-5908976273dd/web/11a658a0-Heading.png) **Text component** ![b46aed9c-Text.png](https://acquia.widen.net/content/8f56f82e-7f91-4977-a359-d037f1fa0341/web/b46aed9c-Text.png) **Image component** ![050e01ef-Image.png](https://acquia.widen.net/content/49f9cee7-5c10-4887-bb2c-b6f6ad4f0abc/web/050e01ef-Image.png) **Video component** ![4a250d83-Video.png](https://acquia.widen.net/content/c1e1ae7d-219c-4212-8aaa-81a68c1aaec9/web/4a250d83-Video.png) **Audio component** ![9ec3b700-Audio.png](https://acquia.widen.net/content/43213e7d-4003-4a5b-b522-a9655617baf5/web/9ec3b700-Audio.png) **Buttons component** ![4951de72-Buttons.png](https://acquia.widen.net/content/7405ba4e-6118-4a66-8385-08b5f5d093ca/web/4951de72-Buttons.png) Card components --------------- **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) **Block quote card** ![7209501e-Blockquote%20card.png](https://acquia.widen.net/content/1e824d54-dc3f-4c7b-b7cb-e608b2e2f649/web/7209501e-Blockquote%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) **Social links card** ![b3cb3b33-Social%20links%20card.png](https://acquia.widen.net/content/c0220646-4e8f-4583-bfcb-a00b58a669af/web/b3cb3b33-Social%20links%20card.png) Slider components ----------------- ![ddee02c3-Slider%20single.png](https://acquia.widen.net/content/f98629e6-9e41-4d92-9665-786ba0551a52/web/ddee02c3-Slider%20single.png) ![61c60a65-Slider%20multiple.png](https://acquia.widen.net/content/7184d6c9-09eb-4293-bb27-0a855c0de873/web/61c60a65-Slider%20multiple.png) Accordion components -------------------- ![0aef622d-Accordion.png](https://acquia.widen.net/content/91bedb5f-28d0-46c7-973f-cd08ab2e1636/web/0aef622d-Accordion.png) Tab components -------------- **Horizontal tabs** ![a4f0a384-Tabs%20horizontal.png](https://acquia.widen.net/content/be343b71-9e24-4044-8369-4a162eab0edf/web/a4f0a384-Tabs%20horizontal.png) **Vertical tabs** ![fa770e0a-Tabs%20vertical.png](https://acquia.widen.net/content/16c25b46-3bef-4759-8eb5-6dde748be81b/web/fa770e0a-Tabs%20vertical.png) Read more components -------------------- ![803d533e-Read%20more.png](https://acquia.widen.net/content/2fdbbdfb-f4a8-44a1-adce-a9b8f272911c/web/803d533e-Read%20more.png) Map components -------------- ![7a78df8d-Google%20map.png](https://acquia.widen.net/content/811fa5bf-3bd3-4ae2-848b-6338e24837f5/web/7a78df8d-Google%20map.png)