---
title: Style sections
slug: style-sections
docTags: 
createdAt: 2025-05-06T23:21:55.016Z
---

:::hint{type="info"}
**Who can do this: **

- Anyone with editing permissions for the Homescreen and HS sections 
:::

Customize a section’s appearance to visually break up your layout.

# Style the background 

Set the tone for each section by applying a background color or leaving it clear to create  white space.

To style the background:

1. [Open the section settings](docId\:RkejaksdeqJyqkTIG-dqY).
2. Select the **Style** tab.
3. Under **Background color,** select a color for both **Dark** **mode** and **Light mode**:
   - **Dark mode:** The section appear on a dark background, defined by your [color scheme.](docId\:gY75_fJEheUQlxGPZGrAp) 
   - **Light mode: **The section appears on a white background.
4. Click the color picker to select a shade, or paste a hex code into the bottom-right field. 

::Image[]{src="https://api.archbee.com/api/optimize/aL1TvWcESMCDQPkBf0hc--JcmOmjYVh1VE66T25FpJI-20250514-023022.png" size="54" width="566" height="413" position="flex-start" showCaption="false"}

# Enable a "Floating" style

Give your section a bubble-like appearance with spacing and rounded corners. For consistent margins, apply this to a nested section, not an outer section.

:::hint{type="success"}
**How can I make the most of the floating style?**

Use it sparingly to highlight interactive content like Challenges or Events and draw users' attention, without cluttering the screen. 
:::

To enable a floating style:

- In the **Style** tab, scroll to **"Floating" w/ rounded corners.**

::Image[]{src="https://api.archbee.com/api/optimize/aL1TvWcESMCDQPkBf0hc--pQh-dRdqtx9UNwZtgYzb--20250509-222517.png" size="54" width="566" height="326" position="flex-start" showCaption="false"}

# Style the header

Adjust the header background, text color, and font size. 

:::hint{type="success"}
**How do I add a header if I don't see one?**

If your section doesn’t have a header, go to the **Content** tab and toggle on **Header + Title. **For more details, see [Add & edit sections](docId\:RkejaksdeqJyqkTIG-dqY). 
:::

To style the header:

1. In the **Style** tab, scroll to **Section header.**
2. Under **Section header**, adjust the following:
   - **Background color:** Applies only to the header. You can match it to the section background for a cohesive look, or choose a different color to make it stand out.
   - **Text color: **Choose the header’s font color. For consistency, you may want to use the same text color as other sections across your layout.
   - **Font size: **Select from Inherit (matches the outer section), Regular, L (Large), XL (Extra large), or Lowercase.
3. Use the **Preview **to check readability and then save.

::Image[]{src="https://api.archbee.com/api/optimize/aL1TvWcESMCDQPkBf0hc--wz9P5AP-UgimZXjk5Wk_R-20250509-172402.png" size="54" width="570" height="309" position="flex-start" alt="Section settings window showing section header settings" showCaption="false"}

Your changes are immediately applied.

:::hint{type="success"}
**How do I use bold colors without overhelming the screen?**

Try using just one bold background color per screen to highlight high-priority content like News & Notices. For the rest, consider softer tones that complement your layout without competing for attention.
:::