> ## Documentation Index > Fetch the complete documentation index at: https://docs.fetchski-attract.com/llms.txt > Use this file to discover all available pages before exploring further. # What every section shares > The Background, Fonts, Buttons and CSS tabs, and the card styles, that work the same way in every section. Most sections share a few tabs that work the same way everywhere: **Background**, **Fonts**, **Button** (or **Buttons**) and **CSS**. Sections with cards also share one set of card styles. Learn them once here, and you know them in every section. **Who can do this:** anyone who can edit the page. The **CSS** tab is for Admins and Owners. ![The Testimonials section editor open beside the page, with its tab list ringed and the shared tabs (Background, Fonts, Button, CSS) badged 1–4.](https://mintcdn.com/fetchski-attract-api/CiExJglj9hDwNWhX/images/cms/guides/sections/what-every-section-shares/guides-sections-shares-tabs-light.png?fit=max\&auto=format\&n=CiExJglj9hDwNWhX\&q=85\&s=0441c73a5f6b8e881fcef6a52dc33129) A section's own tabs come first. The shared ones follow. ## The idea Most sections open on a tab named after the section, such as **Hero** or **Stats**, for their content and layout. Some spread that content over several tabs instead. **Team**, **FAQ**, **Testimonials**, **Google Reviews**, **Instagram Feed**, **Service Area Map** and the gallery sections start with a **Header** tab, then a tab for their content, such as **Team** or **Questions**. The shared tabs come after the section's own tabs. They look and behave the same in a Hero, a FAQ or a Pricing section. Everything here is optional. Leave a shared tab alone, and the section follows the rest of your site. * **Colors** come from **Site design**. * **Fonts** come from the page first, then the site. A section's own **Fonts** tab wins. Without one, the section uses the page's **Fonts** tab, if that's set. Without either, it uses **Site design** → **Typography**. ## Lists of items Many sections hold a list, such as the cards in **Feature Cards**, the numbers in **Stats** or the logos in **Logos / Partners**. Each list works the same way. 1. In the section editor, find the list, such as **Feature cards**, and choose its **Edit** button, such as **Edit Feature cards**. The list opens in its own window. 2. To add an item, choose the **+** button (**Add Item**) at the top of the list, then fill in its settings. 3. To change an item, choose it in the list, then edit its settings. 4. To reorder items, drag them up or down the list. 5. To remove an item, choose the **✕** (**Remove Item**) beside it in the list. 6. Choose **Save**. The page beside the editor updates. ## Colors for light and dark Your site has a light and a dark theme, and visitors can switch between them. So most color options come in pairs, such as **Section background (dark theme)** and **Section background (light theme)**. * Set the dark one only, and it's used in both themes. * Set the light one too, to use a different color in the light theme. * Leave both empty, and the section uses your site's colors from **Site design** (the **Colors · Brand**, **Colors · UI** and **Colors · Status** tabs). ## Background The **Background** tab gives a section its own full-width color band. Bands make a long page easier to read, because each section stands apart from the next. * **Section background (dark theme)**: the band in the dark theme. Choose **Transparent (page background)** to let the page show through, or one of your site's colors: * **Surface**: your page background color. * **Raised (card)**: your card color, a little lighter than the page in the dark theme. * **Sunken**: your band color, a little darker than the page. * **Hill**: a built-in neutral shade between the page and the band colors. You can't change it in **Site design**. * **Accent (soft tint)**: a pale wash of your **Primary / brand** color. You set the first three on **Site design** → **Colors · UI**, and the brand color on **Colors · Brand**. * **Section background (light theme)**: **Match dark theme** uses the same choice, or pick a different one. * **Custom color…**: for an exact color. It opens **Custom background (dark theme)** or **Custom background (light theme)**, where you pick the color. The site colors follow your palette and switch with the theme. A custom color stays the same until you change it. New sections start on **Transparent (page background)**. The **Page Header** starts on **Sunken**. ![3 stacked sections on Parker's page: Intro / Trust on Transparent, Feature Cards on Sunken, Testimonials on Accent (soft tint), so each reads as its own band.](https://mintcdn.com/fetchski-attract-api/eWBaY8R4bYknXF5D/images/cms/guides/sections/what-every-section-shares/guides-sections-shares-background-bands-light.png?fit=max\&auto=format\&n=eWBaY8R4bYknXF5D\&q=85\&s=18cd34bc92d989e398a7b77b06693999) Alternate the bands so each section stands apart. The **Hero** and the **Final CTA** have no Background tab. They have richer backgrounds of their own, on their first tab. ## Fonts The **Fonts** tab sets part of one section in a different font. (The CMS calls a font a "typeface".) For example, give one section's headings a playful display font, a bold font made for big headings. Use it sparingly: a site looks best with few fonts. When the list is empty, it reads "No overrides — this follows the site’s fonts". Choose **Add typeface** to add a row and change a font. Each row has: * **Apply to**: which text changes: **Everything in this section**, **Headings**, **Body text**, **Eyebrows / kickers**, **Buttons** or **Code / monospace**. * **Typeface**: where the font comes from. * **One of the site’s three typefaces**: pick the **Display font**, **Body font** or **Accent / mono font** from **Site design** → **Typography**. These are already loaded, so they keep pages fast. * **Curated pick**: a ready-checked typeface from Bunny Fonts or Fontshare. * **CDN family by name**: load any font from an online font library. 1. Choose the **Provider**: **Bunny Fonts (Google Fonts catalog)** or **Fontshare**. 2. Use the link under it to browse the library ([fonts.bunny.net](https://fonts.bunny.net/) or [fontshare.com](https://www.fontshare.com/)). 3. Type the font's name in **Family name** exactly as the library spells it, such as "Space Grotesk". 4. In **Weights**, list the weights you want, such as 400, 700. A weight is how bold the letters are, from 100 (thin) to 900 (black). 400 is normal and 700 is bold. A font's page in the library shows the weights it has. Leave **Weights** empty to load 400, 500 and 700. * **Uploaded font files**: upload your own font files, one per weight or style. You can add up to 4 rows, and they apply in order. So a first row for **Everything in this section** and a second for **Headings** gives the section a base font plus a different heading font. To change fonts for a whole page, use the **Fonts** tab of the page settings window instead (**More Options** → **Edit** in the edit bar). See [Typography](https://docs.fetchski-attract.com/guides/site-design/typography.md) for the site's own fonts. ![The Fonts tab of a Feature Cards section with one row (Apply to: Headings, Typeface: Curated pick), and the card titles on the page in that typeface.](https://mintcdn.com/fetchski-attract-api/CiExJglj9hDwNWhX/images/cms/guides/sections/what-every-section-shares/guides-sections-shares-fonts-light.png?fit=max\&auto=format\&n=CiExJglj9hDwNWhX\&q=85\&s=965b1f1937a21fc9c80a5ec5a92aee95) One row changes the card titles in this section only. The **Form** section keeps these options on its **Styling** tab. They show once you turn on **Restyle for this placement**. ## Buttons Every button on your site has the same options. A section with one button has a **Button** tab, and a section with two has a **Buttons** tab. **What it says and where it goes** * **Button label**: the text on the button. Leave it empty to hide the button. * **Button link**: a page on your site, such as /contact-us, or a full web address. * **Open in new tab**: opens the link in a new browser tab. A link button shows only when it has both a label and a link. Sign-up and form buttons have no link: they send the form. **How it looks** * **Button style**: **Solid (filled)**, **Outline**, **Soft (tinted fill)** or **Text link**. * **Button size**: from **Small** to **Large**. * **Corner radius**: how rounded the button's corners are, from **Pill** (fully round ends) to **Square**. * **Button color**, **Label color** and **Hover color**: each comes as a dark and a light theme pair. These three are the exception to the rule above: an empty button color means no color, not your site's color. So clear a solid button's **Button color**, and you get an outline-only button. **On hover** * **Hover surface**: what appears behind the button, such as **Soft shadow**, **Soft glow** or **Fill sweep**. * **Hover motion**: **Lift (small slide up)**, **Scale (grow)**, **Lift + scale** or **None**. **Icon** * **Icon name** and **Icon family**: add an icon to the button. Find an icon at [fontawesome.com/icons](https://fontawesome.com/icons) and type its name without "fa-", such as arrow-right. Then pick its look in **Icon family**, such as **Classic Regular**. **Feature Cards**, **Stats** and **How it works / Steps** use the same two fields for their icons. * **Icon position**: **Before label** or **After label**. Turn on **Nudge icon on hover** to slide it a little on hover. The **Page Header**'s **Buttons** tab also has a **Live preview**, with a **Dark** and **Light** switch. Under each button, **Primary Default** and **Secondary Default** reset its look to one of your site's two standard buttons. Your label, link and icon stay as they are. Other sections don't need a preview: the page updates beside the editor. For every option in detail, see [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md). ## Card styles Sections that show cards, such as **Feature Cards**, **Testimonials** or **Pricing / Packages**, share 2 options for the cards. **Card style** sets how each card looks at rest. In **How it works / Steps** it's called **Step style**. There are 12 styles: | Style | Looks like | | - | - | | **Raised — lit soft card** | A quiet card that sits slightly above the page | | **Luxe — frosted glass panel** | A frosted glass panel | | **Outline — plaque frame** | A framed plaque | | **Plain — no chrome** | No card at all, just the content | | **Poster — accent keyline** | A card framed by a thin line in your accent color | | **Spine — accent rail** | A colored rail along the top | | **Tint — accent wash** | A soft wash of your accent color | | **Ticket — notched edges** | A ticket with notches in its sides | | **Bracket — corner marks** | Only corner marks, no full frame | | **Forge — machined plate** | A machined plate with an engraved frame | | **Press — punched index card** | An index card with punched holes and a margin line | | **Inlay — recessed panel** | Content set into the page, like a well | Beside it, **Card corners** sets the rounding: **Default**, **Square**, **Slight**, **Rounded** or **Large**. **Default** keeps the section's own corners (Forge gets tight corners). Some styles bring extra options: * **Card style color**: the color of the Spine rail, the Bracket marks, the Forge frame and the Press margin line. Leave it empty to use your accent color. * **Forge color placement** and **Forge line weight**: for **Forge** only. Color just a corner mark or the whole frame, in a fine, medium or bold line. A few sections leave out styles that don't fit their cards. **Team**, for example, has no **Forge** or **Press**. **Hover effect** sets what a card does when a visitor points at it. The blog sections, **Feature Cards** and **Pricing / Packages** call it **Card hover effect**. **Feature Cards** and **Pricing / Packages** also have their own choices. The shared choices are: * **Lift**, **Pop**, **Press**, **Glow** and **Outline**: quick reactions such as rising or glowing. * **Sheen**: a soft light sweeps across the card. * **Tilt**, **Magnetic** and **Spotlight**: the card follows the visitor's pointer. These need animations turned on in **Site design** → **Motion**. ![The same row of 3 Feature Cards shown 4 times, in Raised, Luxe, Forge and Press.](https://mintcdn.com/fetchski-attract-api/eWBaY8R4bYknXF5D/images/cms/guides/sections/what-every-section-shares/guides-sections-shares-card-styles-light.png?fit=max\&auto=format\&n=eWBaY8R4bYknXF5D\&q=85\&s=9e5483ac8bb5dc5bcee527463b51a83d) One set of cards in four card styles. ## CSS The **CSS** tab is an optional, advanced feature. CSS is the styling language web pages use, so this tab is for small touches the other options don't cover. Admins and Owners can use it. Everyone else sees "Custom CSS needs the “Write custom CSS” permission. Saving keeps the CSS as it is." The tab holds one **Custom CSS** field. In it, each part of the section has its own slot, such as its heading, its cards or its buttons. Type CSS into the slot of the part you want to change, and it styles that part of this one section only. * **Point at a slot** to outline its part on the page. * **Open Currently applied** in a slot to see what already styles that part. * **CSS with mistakes isn't saved.** The CMS lists each problem and how to fix it. A section's CSS wins over **Site design** → **Custom CSS**, which styles every section of a type at once. **Rich Text** and **Layout** have no editor window, so they have a **Custom CSS** button in their side toolbar instead. For slots, examples and every message, see [Custom CSS](https://docs.fetchski-attract.com/guides/site-design/custom-css.md). ## Which sections have what | Section | Background | Fonts | Button tab | Card styles | | - | - | - | - | - | | **Page Header** | Yes (starts on Sunken) | Yes | **Buttons** (2, with **Live preview**) | — | | **Hero** | Its own | Yes | **Buttons** (2) | — | | **Intro / Trust** | Yes | Yes | — | — | | **Feature Cards** | Yes | Yes | — | Yes | | **Stats / By the numbers** | Yes | Yes | **Button** | — | | **Logos / Partners** | Yes | Yes | **Button** | — | | **How it works / Steps** | Yes | Yes | **Button** | Yes (**Step style**) | | **Media + Text block** | Yes | Yes | **Button** | — | | **Device mocks** | Yes | Yes | **Button** | — | | **Team** | Yes | Yes | **Button** | Yes | | **FAQ** | Yes | Yes | **Button** | Yes | | **Service Area Map** | Yes | Yes | **Search button** | Yes | | **Blog Preview** | Yes | Yes | **Button** | Yes | | **Cookie Declaration** | Yes | Yes | — | — | | **Google Reviews** | Yes | Yes | **Button** | Yes | | **Testimonials** | Yes | Yes | **Button** | Yes | | **Instagram Feed** | Yes | Yes | **Button** | Hover effect only | | **Gallery Preview**, **Gallery (Full)** | Yes | Yes | **Button** | Yes | | **Pricing / Packages** | Yes | Yes | **Buttons** | Yes | | **Newsletter Subscription**, **SMS Subscription** | Yes | Yes | **Button** (the submit button) | — | | **Form** | Under **Restyle for this placement** | On **Styling** | **Button** (the submit button) | — | | **Final CTA** | Its own | Yes | **Buttons** (2) | — | Every section in the list also has a **CSS** tab. ## A short example Parker's Puppy Playland wants its home page to feel less like one long block. 1. Jordan opens the **Feature Cards** section's **Background** tab and sets **Section background (dark theme)** to **Sunken**. The light theme follows, because it's on **Match dark theme**. 2. On the **Testimonials** section, Jordan picks **Accent (soft tint)**, so the reviews get a soft band of the brand color. 3. On the **Fonts** tab of Feature Cards, Jordan adds a row: **Apply to** **Headings**, **Typeface** **One of the site’s three typefaces**, **Site typeface** **Accent / mono font**. The card titles change, and nothing else on the site does. 4. Jordan publishes the page. The sections now alternate, and every color still follows the site's palette in both themes. ## Related > [card] [Buttons and card styles](https://docs.fetchski-attract.com/guides/site-design/buttons-and-card-styles.md) > > every button and card option in depth. > [card] [Typography](https://docs.fetchski-attract.com/guides/site-design/typography.md) > > choose your site's three typefaces. > [card] [Colors](https://docs.fetchski-attract.com/guides/site-design/colors.md) > > the palette every section draws from. > [card] [Custom CSS](https://docs.fetchski-attract.com/guides/site-design/custom-css.md) > > slots, examples and messages. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.