--- 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/w4kjutwk2k/web/85ede47c-Header.png?v=0ffcb412-04a1-4a7b-8854-faad33f5de75) **Footer** ![e71df8bd-Footer.png](https://acquia.widen.net/content/kkqfr6s0xe/web/e71df8bd-Footer.png?v=f442f947-4e5c-43c3-aba1-51d9b935ff09) 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/mwz65mjnqu/web/6d8635cf-1%20column%20layout.png?v=beaa5db8-e2dd-4b6b-8a5e-e0c7f041c3e7) _Configuration examples_ ![cb75ee7b-1%20column%20configuration%20examples.png](https://acquia.widen.net/content/n1pppp6wfi/web/cb75ee7b-1%20column%20configuration%20examples.png?v=3f54db62-34e1-438e-9710-1010254a6eed) **2 column layout component** ![def3a073-2%20column%20layout.png](https://acquia.widen.net/content/34ptimrk4l/web/def3a073-2%20column%20layout.png?v=ad7957e6-16da-44bb-8936-2be40abb2a55) _Configuration examples_ ![a2ca03e0-2%20column%20configuration%20examples.png](https://acquia.widen.net/content/w4ip1ivlnq/web/a2ca03e0-2%20column%20configuration%20examples.png?v=d2b50780-7c9f-4039-84f0-25f8bee7b076) **3 column layout component** ![f56d570c-3%20column%20layout.png](https://acquia.widen.net/content/26tmxhoc1a/web/f56d570c-3%20column%20layout.png?v=465afb81-2eaf-48dd-b9dd-7485ccf2a527) _Configuration examples_ ![60afb37a-3%20column%20configuration%20examples.png](https://acquia.widen.net/content/s59o7vm0gk/web/60afb37a-3%20column%20configuration%20examples.png?v=6cfaeca4-473f-463a-a5fb-ac14106decde) **4 column layout component** ![35756195-4%20column%20layout.png](https://acquia.widen.net/content/a33bpwrihu/web/35756195-4%20column%20layout.png?v=68aa33be-8edd-4a79-9911-87512b88f146) **Custom layouts with Row and Column component** ![d743b2db-custom-layout.png](https://acquia.widen.net/content/apdvubwctw/web/d743b2db-custom-layout.png?v=a2f1e912-e99f-4361-a70e-71056f00b3a6) **Divider line component** ![c76be34d-Divider.png](https://acquia.widen.net/content/atvtvzif2m/web/c76be34d-Divider.png?v=a3888de1-16c4-4910-9814-290c361f63b7) **Modal component** ![3af4a790-modal.png](https://acquia.widen.net/content/wuppnnctkv/web/3af4a790-modal.png?v=3b2094d2-5050-4c32-ad3a-02795ae6f93d) Basic components ---------------- **Heading component** ![11a658a0-Heading.png](https://acquia.widen.net/content/9qym9rslsp/web/11a658a0-Heading.png?v=1f84d8c9-af69-4f86-83cf-5908976273dd) **Text component** ![b46aed9c-Text.png](https://acquia.widen.net/content/guhkahvoqa/web/b46aed9c-Text.png?v=8f56f82e-7f91-4977-a359-d037f1fa0341) **Image component** ![050e01ef-Image.png](https://acquia.widen.net/content/7dre2c9i3j/web/050e01ef-Image.png?v=49f9cee7-5c10-4887-bb2c-b6f6ad4f0abc) **Video component** ![4a250d83-Video.png](https://acquia.widen.net/content/fw1rh6ikbq/web/4a250d83-Video.png?v=c1e1ae7d-219c-4212-8aaa-81a68c1aaec9) **Audio component** ![9ec3b700-Audio.png](https://acquia.widen.net/content/p4jp7h4uro/web/9ec3b700-Audio.png?v=43213e7d-4003-4a5b-b522-a9655617baf5) **Buttons component** ![4951de72-Buttons.png](https://acquia.widen.net/content/jylkkpmzlf/web/4951de72-Buttons.png?v=7405ba4e-6118-4a66-8385-08b5f5d093ca) Card components --------------- **Feature card** ![24753309-Feature%20card.png](https://acquia.widen.net/content/grmd3zocg6/web/24753309-Feature%20card.png?v=0d49e39c-ce2f-45e5-b203-60d6038dc0ba) **Content card** ![5c77c098-Content%20card.png](https://acquia.widen.net/content/dmbw5d5ia6/web/5c77c098-Content%20card.png?v=bc006795-c571-40c1-95e4-7f907d4b26ad) **Horizontal content card** ![eef3929e-Horizontal%20content%20card.png](https://acquia.widen.net/content/ttuukxfgs4/web/eef3929e-Horizontal%20content%20card.png?v=e4fd27e3-96c2-4996-87a3-f077f6fade82) **Impact card** ![73b9d4d8-Impact%20card.png](https://acquia.widen.net/content/z9too4hr43/web/73b9d4d8-Impact%20card.png?v=e7a32855-b2fe-4fbb-80bf-108d01701e52) **Price card** ![80dd4a7c-Price%20card.png](https://acquia.widen.net/content/8v8uthm3qj/web/80dd4a7c-Price%20card.png?v=bfb1774b-91b2-42f1-b8d6-8e9a55fc35dc) **Profile card** ![79e6369a-Profile%20card.png](https://acquia.widen.net/content/retmabkfjz/web/79e6369a-Profile%20card.png?v=72cbfb34-8e13-494b-a31b-7abed26d128d) **Block quote card** ![7209501e-Blockquote%20card.png](https://acquia.widen.net/content/v9fkpzu5rh/web/7209501e-Blockquote%20card.png?v=1e824d54-dc3f-4c7b-b7cb-e608b2e2f649) **Testimonial card** ![97760927-Testimonial%20card.png](https://acquia.widen.net/content/1fvi6hkhjz/web/97760927-Testimonial%20card.png?v=537aca97-9185-439a-a0ed-d19e9ffd3b7b) **Logo card** ![8bb914d3-Logo%20card.png](https://acquia.widen.net/content/bqdcawzwyo/web/8bb914d3-Logo%20card.png?v=2bfa1e97-78b4-40ce-8c64-5a6421976db6) **Stat card** ![1755c037-Stat%20card.png](https://acquia.widen.net/content/nmfmfye8aq/web/1755c037-Stat%20card.png?v=53583cd6-a61a-43a7-b4ec-ebc24b154056) **Social links card** ![b3cb3b33-Social%20links%20card.png](https://acquia.widen.net/content/mzmmd1wbjy/web/b3cb3b33-Social%20links%20card.png?v=c0220646-4e8f-4583-bfcb-a00b58a669af) Slider components ----------------- ![ddee02c3-Slider%20single.png](https://acquia.widen.net/content/eeaxghhnyu/web/ddee02c3-Slider%20single.png?v=f98629e6-9e41-4d92-9665-786ba0551a52) ![61c60a65-Slider%20multiple.png](https://acquia.widen.net/content/dqilg9n2u5/web/61c60a65-Slider%20multiple.png?v=7184d6c9-09eb-4293-bb27-0a855c0de873) Accordion components -------------------- ![0aef622d-Accordion.png](https://acquia.widen.net/content/onnz2di2cl/web/0aef622d-Accordion.png?v=91bedb5f-28d0-46c7-973f-cd08ab2e1636) Tab components -------------- **Horizontal tabs** ![a4f0a384-Tabs%20horizontal.png](https://acquia.widen.net/content/qqalcpaysv/web/a4f0a384-Tabs%20horizontal.png?v=be343b71-9e24-4044-8369-4a162eab0edf) **Vertical tabs** ![fa770e0a-Tabs%20vertical.png](https://acquia.widen.net/content/swdevf2n4r/web/fa770e0a-Tabs%20vertical.png?v=16c25b46-3bef-4759-8eb5-6dde748be81b) Read more components -------------------- ![803d533e-Read%20more.png](https://acquia.widen.net/content/zdsxctbafc/web/803d533e-Read%20more.png?v=2fdbbdfb-f4a8-44a1-adce-a9b8f272911c) Map components -------------- ![7a78df8d-Google%20map.png](https://acquia.widen.net/content/moh9cyijhv/web/7a78df8d-Google%20map.png?v=811fa5bf-3bd3-4ae2-848b-6338e24837f5)