--- title: "UIKit helpers for common layouts" date: "2020-11-09T17:27:34+00:00" summary: "Discover UIKit's powerful Helpers library for rapid web development. Explore pre-built layouts combining components for hero sections, text areas, cards, tabs, sliders, and more. Streamline your design process with these versatile, ready-to-use templates." image: type: "page" url: "/drupal-starter-kits/add-ons/site-studio/uikit-helpers-common-layouts" id: "2753d4b8-bd48-4e70-8672-d29778de2a63" --- Table of contents will be added The UIKit includes a library of ‘Helpers,’ which combine the components into common layouts. The Helpers get you building quickly and demonstrate how to combine components to form layouts. Hero sections ------------- **Basic hero** ![c3abe828-Basic%20hero.png](https://acquia.widen.net/content/344c4594-8ac8-4779-811a-0c7728409c71/web/c3abe828-Basic%20hero.png) **Shallow hero** ![bd48208d-Shallow%20hero.png](https://acquia.widen.net/content/9bfd4ed4-177f-4105-a6a6-6d688214a318/web/bd48208d-Shallow%20hero.png) **Hero with image right of text** ![873975cb-Hero%20image%20right.png](https://acquia.widen.net/content/ee90ef66-4703-4f5f-8d16-6f9e75bf3f0a/web/873975cb-Hero%20image%20right.png) **Hero with image below text** ![6fdbd6c1-Hero%20image%20below.png](https://acquia.widen.net/content/650c1ec0-7fa4-4ad1-aeab-a464b6b497c5/web/6fdbd6c1-Hero%20image%20below.png) Text sections ------------- **Heading section center aligned** ![3851887d-Heading%20centered.png](https://acquia.widen.net/content/5a71adc3-c279-4612-a1ce-fe8ae2cfb2e6/web/3851887d-Heading%20centered.png) **Heading section left aligned** ![2f9b52db-Heading%20left%20aligned.png](https://acquia.widen.net/content/b38068bd-18d3-437a-a856-fc0e59411e66/web/2f9b52db-Heading%20left%20aligned.png) **Text section** ![a2a08993-Text%20section.png](https://acquia.widen.net/content/cbd6eabb-4d93-4b31-bce1-ad584eef30aa/web/a2a08993-Text%20section.png) **Text panel over image section** ![32703930-Text%20panel%20over%20image.png](https://acquia.widen.net/content/d0c47c7c-bba0-4663-ae83-902c5543078b/web/32703930-Text%20panel%20over%20image.png) **Accordion text section** ![13e32435-Accordion%20text%20section.png](https://acquia.widen.net/content/7daffd83-e128-428a-a38d-973f385370a4/web/13e32435-Accordion%20text%20section.png) **Multi-column text section** ![7bf0f97d-Multi-column%20text%20section.png](https://acquia.widen.net/content/b052cd85-ab47-45bb-9b91-01736e1a7a05/web/7bf0f97d-Multi-column%20text%20section.png) **Text with expandable read more** ![96ce4e35-Text%20read%20more.png](https://acquia.widen.net/content/e2c7f56a-35fc-4ee8-9517-1ae1c412e6b1/web/96ce4e35-Text%20read%20more.png) **Text and image** ![f66a57c6-Text%20and%20image.png](https://acquia.widen.net/content/12ded858-d652-4567-bd04-e597e67ee105/web/f66a57c6-Text%20and%20image.png) **Text and image slider** ![d0d7566a-Text%20and%20image%20slider.png](https://acquia.widen.net/content/ac322fbc-1da9-45e9-8ac8-239a18a82208/web/d0d7566a-Text%20and%20image%20slider.png) **Text and features** ![8e60110e-Text%20and%20features.png](https://acquia.widen.net/content/7cf55dfc-27a2-4820-992b-c48b23b67ea1/web/8e60110e-Text%20and%20features.png) **Text and content cards** ![e43400a3-Text%20and%20content%20cards.png](https://acquia.widen.net/content/5b9aa470-6e68-4f23-9afb-5dd7a03a9052/web/e43400a3-Text%20and%20content%20cards.png) **Text and content card slider** ![3cbcd95d-Text%20and%20content%20slider.png](https://acquia.widen.net/content/18681949-241c-4ab6-ad92-424a572fddb8/web/3cbcd95d-Text%20and%20content%20slider.png) **Text and price cards** ![67b6d90b-Text%20and%20price%20cards.png](https://acquia.widen.net/content/32833325-890c-48e1-b1b3-bcf8fd4c359a/web/67b6d90b-Text%20and%20price%20cards.png) **Text and profile cards** ![1d744227-Text%20and%20profile%20cards.png](https://acquia.widen.net/content/b842391b-1fe5-44f0-b71a-7a5d0c99b630/web/1d744227-Text%20and%20profile%20cards.png) **Text and stats** ![0356ad10-Text%20and%20stats.png](https://acquia.widen.net/content/9b742bd1-f081-48a6-b37f-a363f044619b/web/0356ad10-Text%20and%20stats.png) **Text and map** ![6f0346e6-Text%20and%20map.png](https://acquia.widen.net/content/adb1b002-9d9a-4932-8572-f11f10695532/web/6f0346e6-Text%20and%20map.png) **Text and accordion** ![86847379-Text%20and%20accordion.png](https://acquia.widen.net/content/542d4d16-22dd-43fe-97ee-06903eb873cf/web/86847379-Text%20and%20accordion.png) Card sections ------------- **Content card section** ![432511c1-Content%20card%20section.png](https://acquia.widen.net/content/c8662119-59c8-412c-bedf-3c5d35ff88a4/web/432511c1-Content%20card%20section.png) **Logo card section** ![ca609223-Logo%20card%20section.png](https://acquia.widen.net/content/478147fb-a0a3-4e3d-b7e5-6cf0a191c200/web/ca609223-Logo%20card%20section.png) **Price card section** ![847cf603-Price%20card%20section.png](https://acquia.widen.net/content/a484313b-0f57-4b0b-a54d-283d489691ef/web/847cf603-Price%20card%20section.png) **Feature card grid** ![445c6dfd-Feature%20card%20grid%20section.png](https://acquia.widen.net/content/db2b5cee-5bb1-4b89-86c0-1f0908e50879/web/445c6dfd-Feature%20card%20grid%20section.png) **Irregular feature card grid** ![b63a12fb-Irregular%20feature%20card%20grid%20section.png](https://acquia.widen.net/content/00f7abc1-d927-403e-a98f-e5880784a8e4/web/b63a12fb-Irregular%20feature%20card%20grid%20section.png) **Impact card section** ![96910e1d-Impact%20card%20section.png](https://acquia.widen.net/content/a87cafe6-4891-48a8-8384-4e2955bf1d4b/web/96910e1d-Impact%20card%20section.png) **Irregular impact card grid** ![5bc5d453-Irregular%20impact%20card%20grid.png](https://acquia.widen.net/content/4a1b49a8-6416-4941-a2d1-3308ff17b9b7/web/5bc5d453-Irregular%20impact%20card%20grid.png) Tabbed content sections ----------------------- **Horizontal tabs section** ![dd6dffaf-Tabbed%20content%20section.png](https://acquia.widen.net/content/d9b687c4-2714-48be-8067-2498666c2c5e/web/dd6dffaf-Tabbed%20content%20section.png) **Vertical tabs section** ![8f70c2ff-Vertical%20tabbed%20content%20section.png](https://acquia.widen.net/content/404e89cd-741e-41f1-a4a0-dae2e11519dc/web/8f70c2ff-Vertical%20tabbed%20content%20section.png) Slider sections --------------- **Content card slider** ![87a313bd-Content%20card%20slider.png](https://acquia.widen.net/content/b1af2c05-709a-48c1-b370-64879c3c6c8c/web/87a313bd-Content%20card%20slider.png) **Profile card slider** ![69f8f884-Profile%20card%20slider.png](https://acquia.widen.net/content/4571052b-bd18-4c43-b874-450303ea5c3b/web/69f8f884-Profile%20card%20slider.png) **Testimonial slider** ![adc15aab-Testimonial%20card%20slider.png](https://acquia.widen.net/content/403775fb-4f43-4e3f-9a03-a3706f4cf371/web/adc15aab-Testimonial%20card%20slider.png) Miscellaneous ------------- **Call to action section** ![fe69bbbf-CTA%20section.png](https://acquia.widen.net/content/8800db8a-8df3-4643-91ab-e1635d370b15/web/fe69bbbf-CTA%20section.png) **Image grid section** ![327ff1dd-Image%20grid.png](https://acquia.widen.net/content/36ca5bbc-dd0b-45d8-bc05-230d1d90dec9/web/327ff1dd-Image%20grid.png) **Full bleed image grid section** ![a3577403-Full%20width%20image%20grid.png](https://acquia.widen.net/content/f7035fdf-6b21-4c5d-9ec8-ce626982f790/web/a3577403-Full%20width%20image%20grid.png)