4. From the left dropdown, select the **Home** page. The Body section displays the list of body blocks.
5. Click **Add section** and select **Multicolumn card section**. The block is added with three default elements.
6. Click the **Multicolumn card section** header to edit the section title and overall icon color.
7. Click **Add element** to add more column elements beyond the default three.
8. Use the **Reorder** () icon to rearrange elements within the section.
9. Click the **Hide** () icon to toggle the visibility of individual elements.
---
## Configure column elements
Click any element in the section to edit its attributes:
| Attribute | What you can configure |
|---|---|
| **Icon** | Click **Change** to select a Document360 or Font Awesome icon from the **Icons** tab, or upload/enter the URL of a custom image in the **Image** tab |
| **Title** | Enter the column title. Click the **Hide** () icon to hide the title without deleting it |
| **Icon color** | Choose a color for the icon |
| **Paragraph text** | Enter and format the column description using Bold (), Italic (), URL/Link (), Unordered list (), or Ordered list () |
---
## Save and publish
* Use the **Preview** toggle on the right to review your changes.
* Click **Save** to save your changes.
* Click **Publish** to make changes live.
---
## Knowledge base site view
Here is an example of a Multicolumn card section as it appears on the knowledge base site.
---
## Delete a Multicolumn card section
1. Click the **Multicolumn card section** in the body blocks list. The section navigation bar appears.
2. Click **Delete** () in the navigation bar.
3. Click **Yes** in the Delete confirmation prompt.
4. After deleting, click **Save** to save as a draft, **Preview** to review, and **Publish** to make changes live.
---
## Best practices
- **Keep column descriptions short** - one to two sentences per column works best. Long descriptions break the visual balance of the card layout.
- **Use consistent icon styles** - mixing filled, outlined, and custom image icons in the same section looks inconsistent. Choose one style and stick to it.
- **Use three to four columns** - more than four columns on a standard screen makes each card too narrow to read comfortably.
- **Match icon color to your brand** - the icon color setting applies to all icons in the section, so choose a color that complements your site's brand color.
- **Use square images if uploading custom icons** - non-square images may appear distorted. Recommended dimensions are 30×30px or 50×50px.
---
## FAQ
How do I update a column element's icon using Font Awesome?
Navigate to {{variable.Settings}} () > {{variable.Knowledge base site}} > Site customization and click Customize site. From the left dropdown, select the Home page. Click the desired element in the Multicolumn card section. Click Change in the icon settings. Expand the Font Awesome accordion and enter the class name of the desired icon.
For example, for the icon code <i class="fa-solid fa-files"></i>, the class name to enter is fa-solid fa-files.