# Icon + Text

<figure><img src="https://1694021061-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuVFZPn6NWEBzyt3Pl8h6%2Fuploads%2FIW63VeJR4wUYf8UG8t2K%2Fimage.png?alt=media&#x26;token=ec9de8d1-aa13-417a-84e1-3f6cfdaa4b5b" alt=""><figcaption></figcaption></figure>

## What is an Icon +Text page?

The Icon + Text page allows you to use iconography to complement the content.

## Quick steps: how to create & edit an Icon + Text page

1. **Open Authoring.** Create or open a [Learning Story](https://everyday-digital.gitbook.io/authoring-docs/authoring/content-types/learning-story), [Assessment](https://everyday-digital.gitbook.io/authoring-docs/authoring/content-types/assessment) or [Survey](https://everyday-digital.gitbook.io/authoring-docs/authoring/content-types/survey) [content type](https://everyday-digital.gitbook.io/authoring-docs/authoring/content-types).
2. **Open the Editor.**
3. **Add an Icon + Text page.** Select the + icon and choose Icon + Text from the Add Page options. Alternatively, open an existing Icon + Text page.
4. **Edit the Icon + Text page.** Select the page to view the [Page Options](https://everyday-digital.gitbook.io/authoring-docs/story-and-page-settings#what-are-the-page-options), and select Update to add and edit content. The icon must be at least 320x320px and in .svg, .jpg or .png format. Use the text space to enter the text that will display below your icon.
5. **Format text layout and style.** Use the toolbar for basic text [formatting](#text-formatting-tools), and toggle to [Advanced Settings ](#icon-+-text-advanced-settings)for further layout options.

## Icon + Text Advanced Settings

**Border**\
A thin white border is added to icons by default.

**Border**\
A thin white border is added to icons by default.

**Border Colour**\
The border is white by default, but can be changed to black.

**Opacity/Alpha**\
Adjust the icon opacity.

**Radius**\
Adjust the icon border radius.

**Background colour**\
Select a different background colour to override the theme default.

**Background Gradient** \
Choose a second colour to create a gradient background.

## Icon + Text Tips and FAQs

### How to format an Image + Text page

**Text formatting.** Refer to text formatting toolbar options in the [Text page](https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/text)

**Image formatting.** Refer to the [Advanced Settings.](#icon-+-text-advanced-settings)

{% hint style="warning" %}
If you choose custom colours for your text, those colours will also be used in Dark Mode. Only default font colours will auto-adjust in Dark Mode.
{% endhint %}
