# Icons Sections

## Using the Icons Sections

* [ ] **Make sure you have Sections Kit installed.** Check your app page inside of your Site Admin ex: <https://yourdoomain.thinkific.com/manage/apps> and make sure you have "Sections Kit 💥 PowerUp" installed. If it is not listed there, head back to the member dashboard and install it.
* [ ] Open up the page you would like to add a Section Kit section to and **first add the "Base Kit Section"**. You can also copy a Base kit section from another page if you have one already created. Be sure to read our guide on how Base kit works.
* [ ] You can easily search for all banner sections by adding a section and search for ***"*****Kit: Icons*****"*** or you can search for a specific section to use by searching for it's Kit Id ex: ***Kit: Icons (01)***

## Icons Sections

{% embed url="<https://docs-kit.superpowerups.com/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FBJUd1eSJwbp9d5hWS3dC%2FScreen%20Shot%202022-01-15%20at%202.06.36%20PM.png?alt=media&token=b7471e58-5359-4b66-88e4-6d0119091e8b>" %}

### [01 - 3 Columns (icon on left) ](/kit-powerups/sections-kit/icons-sections/01-3-columns-icon-on-left.md)

This icon section has 3 columns with the icon on the side of the text

{% embed url="<https://docs-kit.superpowerups.com/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FYj5rvWWZ10lnNTXf6xn6%2FScreen%20Shot%202022-01-15%20at%202.06.55%20PM.png?alt=media&token=045ce30a-56fb-49d3-b3dc-5d09b0725499>" %}

### [02 - 2 Column Cards](/kit-powerups/sections-kit/icons-sections/02-2-column-cards.md)&#x20;

This icon section has two columns and each icon block will look like a card

{% embed url="<https://docs-kit.superpowerups.com/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2Fm4wTehv4eVixUhPA9kXr%2FScreen%20Shot%202022-01-15%20at%202.07.05%20PM.png?alt=media&token=a91295d7-3f31-4685-8504-00297168e9f4>" %}

### [03 - 4 Columns](/kit-powerups/sections-kit/icons-sections/03-4-columns.md)&#x20;

This icon section will place the icon blocks in 4 columns with the icon above the text

{% embed url="<https://docs-kit.superpowerups.com/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2F6z7lzE9juIKQipyuGPOD%2FScreen%20Shot%202022-01-15%20at%202.07.13%20PM.png?alt=media&token=37f4117a-8e71-435b-80eb-fa292eaf998a>" %}

### [04 - 3 Column Cards ](/kit-powerups/sections-kit/icons-sections/04-3-column-cards.md)

This icon section will place the icon blocks in 3 columns with the icon on the side of the text

{% embed url="<https://docs-kit.superpowerups.com/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FKQUwEjZpUwMpSgGpWCbm%2FScreen%20Shot%202022-01-15%20at%202.07.21%20PM.png?alt=media&token=6c3ed919-fa9f-4efc-ad31-fb682cb9abea>" %}

### [05 - 5 Columns ](/kit-powerups/sections-kit/icons-sections/05-5-columns.md)

This icon section will place the icon blocks in 5 columns

{% embed url="<https://docs-kit.superpowerups.com/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FxoaYplEmuHX0X795Jsi3%2FScreen%20Shot%202022-01-15%20at%202.07.32%20PM.png?alt=media&token=94aa83e7-2c1f-4763-87c8-caba3abe8ae1>" %}

### [06 - 3 Columns Motion Cards ](/kit-powerups/sections-kit/icons-sections/06-3-columns-motion-cards.md)

This icon section will place the icon blocks in 3 columns and include a animation on hover

{% embed url="<https://docs-kit.superpowerups.com/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FtyibVVVxTYsF0yKcln9j%2FScreen%20Shot%202022-01-15%20at%202.28.15%20PM.png?alt=media&token=5944f928-daa2-4735-afe7-c37ac07119e4>" %}

### [07 - 3 Columns (icon on top) ](/kit-powerups/sections-kit/icons-sections/07-3-columns-icon-on-top.md)

This icon section will place the icon blocks in 3 columns and the icon will be on top of the text

{% embed url="<https://docs-kit.superpowerups.com/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2Fycq2clfYw28ibEL9RSVc%2FScreen%20Shot%202022-01-15%20at%202.07.56%20PM.png?alt=media&token=dbc25cc7-8ac4-40d0-84d1-fe4cade0d8e0>" %}

### [08 - Circle Background ](/kit-powerups/sections-kit/icons-sections/08-circle-background.md)

This icon section will place the icpn blocks in 3 columns with the icon placed in a circle background

{% embed url="<https://docs-kit.superpowerups.com/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FKIJeC82B4zYavwZLyDG2%2FScreen%20Shot%202022-01-15%20at%202.28.26%20PM.png?alt=media&token=e196243d-8017-448a-8ce9-7e4a35d94c98>" %}

### [09 - 3 Columns Border Card ](/kit-powerups/sections-kit/icons-sections/09-3-columns-border-card.md)

This icon section will place the icon blocks in 3 columns and include a color border on the top of each block

{% embed url="<https://docs-kit.superpowerups.com/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FYN5FmopE8mCx6KPvltMS%2FScreen%20Shot%202022-01-15%20at%202.08.08%20PM.png?alt=media&token=82954889-ec0a-4fba-8186-eb269b8faeac>" %}

### [10 - Tall Cards ](/kit-powerups/sections-kit/icons-sections/10-tall-cards.md)

This icon section will place the icon blocks in 4 columns and include extra padding to make the icon blocks tall

{% embed url="<https://docs-kit.superpowerups.com/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2Fhzge9iK35ugpe15VNh0z%2FScreen%20Shot%202022-01-15%20at%202.08.18%20PM.png?alt=media&token=cc13fab9-f8c0-4ec5-9ebf-dbfc294520df>" %}

### [11 - 3 Columns Cards ](/kit-powerups/sections-kit/icons-sections/11-3-columns-cards.md)

This icon section will place the icon blocks in 3 columns with the icon positioned on the left and above the text

{% embed url="<https://docs-kit.superpowerups.com/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FJ26dumegZLQRhbjoXdp6%2FScreen%20Shot%202022-01-15%20at%202.08.26%20PM.png?alt=media&token=fb32d54a-00d8-4ca6-ad01-8b94dfdcc398>" %}

### [12 - 6 Columns ](/kit-powerups/sections-kit/icons-sections/12-6-columns.md)

This icon section will place the icon blocks in 6 sections with the icon on top of a heading

{% embed url="<https://docs-kit.superpowerups.com/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsnW35m4zgTzMXBxNFg9E%2Fuploads%2FmJQKDjiapZ6h573BPZsz%2FScreen%20Shot%202022-01-15%20at%202.08.34%20PM.png?alt=media&token=7c1de438-05f3-40ed-9658-476e29b5e76f>" %}

### [13 - 3 Columns Color Hover ](/kit-powerups/sections-kit/icons-sections/13-3-columns-color-hover.md)

This icon section will place the icon blocks in 3 columns and have a hover animation


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs-kit.superpowerups.com/kit-powerups/sections-kit/icons-sections.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.