# Content blocks Some sections support the same 'rich content' blocks for text, images, buttons, and style elements. * Under the section, click **(+) Add block**. * Click the block to find settings. * Click and hold the drag handles **`⋮⋮`** to re-order blocks. > For other sections, click the section to find settings for adding text, media, and buttons.

## Heading ***


Sections	Image hero - Overlapping media with content - Media with content split - Newsletter - Rich Text - Video hero

Add heading text and change its size. `Click Heading block to find settings`

Setting	Description
Heading	The title of the block.
Heading size	Change the size of the heading text from small (1) to large (8).
Heading tag	Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to replace default H1 headings. This option doesn't change the heading's appearance.
Font	Go to Theme settings > Fonts to change the font for all headings.

## Text ***


Sections	Image hero - Overlapping media with content - Media with content split - Newsletter - Rich Text - Video hero

Click **(+) Add block** and select **Text**. Add multiple lines of text and change its size. `Click Text block to find settings`

Setting	Description
Text	Add rich text. Use the buttons to make the text bold or italicized, or to add a link.
Text size	Change the size of the text.
Font	Go to Theme settings > Fonts to change the font for all body text.

## Accent ***


Sections	Image hero - Overlapping media with content - Media with content split - Newsletter - Rich Text - Video hero

Click **(+) Add block** and select **Accent**. Add small heading text with an optional divider. `Click Accent block to find settings`

Setting	Description
Text	Add small heading text to use as a label.
Text size	Change the size of the text.
Show accent divider	Display border line below the accent text.
Divider color	Use the Theme colors from your theme settings or the Current colors from the section settings.
Font	Go to Theme settings > Fonts to change the font for all accent text.

## Button ***


Sections	Image hero - Overlapping media with content - Media with content split - Newsletter - Rich Text - Video hero

Click **(+) Add block** and select **Image**. Add a link to another page and select a button style. When multiple button blocks are ordered together in the section panel, they will display in a single row.

`Click Button block to find settings`

Setting	Description	Options
Button link	The URL that you want the button to link to.
Button label	The text that displays on the button. The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now).	Default: "Button"
Button style	Change the style of the button. Choose to use Theme colors or Current colors set in section.	Solid Outline Text
Font	Go to Theme settings > Fonts to change the button fonts.

## Image ***


Sections	Image hero - Overlapping media with content - Media with content split - Newsletter - Newsletter compact - Rich Text - Video hero

Click **(+) Add block** and select **Image**. Upload an image and adjust its width. . `Click Image block to find settings`

Setting	Description	Options
Image	Select or upload an image. There are no required dimensions. We recommend an image with a minimum width of 50px. Use PNG files for images with a transparent background.
Image width	Set Full width or Custom width	Full width Custom width
Image size	Set the maximum width (in pixels) of the image on desktop.	50 - 750 px
Mobile image size	Set the maximum width (in pixels) of the image on mobile.	50 - 350 px

## Text list with icons ***


Sections	Image hero - Overlapping media with content - Media with content split - Rich Text - Video hero

Click **(+) Add block** and select **Text list with icons**.

### Add items *** Click the **Text list with icons** block to open the settings. Add up to 6 list items with an **icon** and **text**. Choose an icon or upload your own. `Click Text list with icons block to find settings`

Setting	Description
Icon	Choose from 30+ free icons to display next to the text.
Custom icon image	Upload your own icon image to display next the heading. We recommend a PNG image with a transparent background and minimum dimensions of 50px by 50px.
Text	Add short text to tell customers about your product.
Vertical alignment	Position the text at the Center or Top, relative to the icon.

### Change icon style *** Click the **Text list with icons** block to open the settings. Customize the style of the icons, including the **framing**, **background**, **color**, and **width**. `Click Text list with icons block to find settings`

Setting	Description
Icon framing	Choose to show a Circle or Slightly rounded border around the icons. Select None to show no border.
Icon framing style	Choose to display icons with a solid color background (Filled), or with a border and no background (Outlined).
Icon frame color	Choose to use the Accent color (from your theme settings) or the Current text color (from the section settings).
Icon width	Set the pixel width of icons for desktop screens: between 10 and 50 pixels.
Mobile icon width	Set the pixel width of icons for mobile screens: between 10 and 50 pixels.

## Video player ***


Sections	Image hero - Overlapping media with content - Media with content split - Rich Text - Video hero

Click **(+) Add block** and select **Video player**. Add a video that visitors can can click to view within a popup video player. You can either use an uploaded `.mp4` video in your **Shopify files** or embed a video from **YouTube** or **Vimeo**.

STEPS: Add Shopify-hosted video

In your **Shopify admin**: 1. In the side panel, click **Content > Files**. 2. Click **Upload files** to add a **`.mp4`** file from your computer. > Once your file has been processed, you can go to the next step. In the theme editor (**Customize**): 1. Click the **Video player** block within the section. 2. Under **Shopify video**, click **Select video** to select your video and click **Done**. 3. Click **Save**.

STEPS: Embed YouTube or Vimeo video

In the theme editor (**Customize**): 1. Click the **Video player** block to open the settings. 2. Under **Youtube or Vimeo URL**, paste the link of your hosted video. 3. Click **Save**.

`Click Video player to find settings`

Setting	Description
Shopify video	Select an `mp4`or `mov` video that you've uploaded to your Shopify files in the admin.
YouTube or Vimeo URL	Paste the full URL of your YouTube or Vimeo video.
Play button design	Display the play button as a Play icon only or Button with label ("Watch now").
Button size	Change the size to Small or Large.
Play button	Display the Play icon as Light or Dark.
Button label	Change the default button label text ("Watch now")
Button style	Change the style of the button: Solid, Outline, or Text. Choose to use Theme colors or Current colors set in section.

## Spacer ***


Sections	Contact form - Image hero - Overlapping media with content - Media with content split - Newsletter - Rich Text - Video hero

Click **(+) Add block** and select **Spacer**. Add space between other content blocks. `Click Spacer block to find settings`

Setting	Description	Options
Space	Add a gap of empty space between blocks. Use sliders to adjust the amount of space on desktop and mobile.	4 - 64 px

## Divider ***


Sections	Image hero - Overlapping media with content - Media with content split - Newsletter - Rich Text - Video hero

Click **(+) Add block** and select **Divider**. Add a border line between blocks with custom **thickness** and **spacing**. `Click Divider block to find settings`

Setting	Description	Options
Thickness	Use the slider to increase the thickness of the divider line.	1 - 5
Spacing	Use the sliders to add space above and below the divider. Set to 0 to remove spacing.	1 - 40

--- # 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://help.fluorescent.co/cornerstone/pages/theme-sections/content-blocks.md?ask= ``` 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.