# 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) ](https://docs-kit.superpowerups.com/kit-powerups/sections-kit/icons-sections/01-3-columns-icon-on-left)

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](https://docs-kit.superpowerups.com/kit-powerups/sections-kit/icons-sections/02-2-column-cards)&#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](https://docs-kit.superpowerups.com/kit-powerups/sections-kit/icons-sections/03-4-columns)&#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 ](https://docs-kit.superpowerups.com/kit-powerups/sections-kit/icons-sections/04-3-column-cards)

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 ](https://docs-kit.superpowerups.com/kit-powerups/sections-kit/icons-sections/05-5-columns)

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 ](https://docs-kit.superpowerups.com/kit-powerups/sections-kit/icons-sections/06-3-columns-motion-cards)

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) ](https://docs-kit.superpowerups.com/kit-powerups/sections-kit/icons-sections/07-3-columns-icon-on-top)

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 ](https://docs-kit.superpowerups.com/kit-powerups/sections-kit/icons-sections/08-circle-background)

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 ](https://docs-kit.superpowerups.com/kit-powerups/sections-kit/icons-sections/09-3-columns-border-card)

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 ](https://docs-kit.superpowerups.com/kit-powerups/sections-kit/icons-sections/10-tall-cards)

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 ](https://docs-kit.superpowerups.com/kit-powerups/sections-kit/icons-sections/11-3-columns-cards)

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 ](https://docs-kit.superpowerups.com/kit-powerups/sections-kit/icons-sections/12-6-columns)

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 ](https://docs-kit.superpowerups.com/kit-powerups/sections-kit/icons-sections/13-3-columns-color-hover)

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