> ## Documentation Index
> Fetch the complete documentation index at: https://help.emaillove.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> Components are the sections emails are built from. Create and edit them in Component Studio, decide what marketers can change, set up show/hide properties, and publish updates to emails.

A component is a section of an email: a header, a hero, a product grid, a footer. People build emails by stacking components. Each component's layout and styles are fixed by the design system. People fill in its content: the text, images, links and buttons you've opened up to them.

## The Components tab

Open a design system and go to **Components**.

![The Components tab listing components with their lock state and an Edit button](https://mintcdn.com/emaillove/Mq_WDCFfMdudNH2J/images/builder/design-systems/components.png?fit=max\&auto=format\&n=Mq_WDCFfMdudNH2J\&q=85\&s=ac97f079fddb135690f0b59c09de8eee)

* Search with **Search components**, filter with **Category**, and sort by **Last updated** or **Name**.
* Each row shows what marketers can change: **Editable fields**, a number of locked fields, **Fields locked**, or **No fields**.
* Click **Edit** to open the component in Component Studio.
* The **⋯** menu has **Edit fields & permissions** and **Download component source**.

## Add components

* **Create component:** click **Create component**, enter a **Component name** and click **Create and build**. Component Studio opens on an empty component.
* **Add from starter:** add Email Love's starter components to your design system, styled with your brand. Tick the ones you want and click **Add**. The button shows how many, for example **Add 3 modules**. This button shows when there are starter components your design system doesn't have yet.
* **From Figma or your emails:** setup builds components for you. See [Create a design system](https://help.emaillove.com/builder/design-systems/create.md).
* **From an email:** in the editor, a section's toolbar has **Save as component**. Design system managers see it.

## Component Studio

Component Studio is where you design a component.

* The left rail has **Layers**, **Blocks** and **Layouts**, and **AI chat**. See [AI chat](https://help.emaillove.com/builder/ai/chat.md#component-chat).
* Switch between **Visual** and **Code** at the top.
* The right panel has four tabs:
  * **Assistant**: ask for a change in plain words.
  * **Style**: the selected element's styles.
  * **Mobile**: phone-only styles.
  * **Permissions**: what marketers can change. See below.
* **Settings** sets the component's label, description and section. **Version history** lists its published versions. **Restore as draft** brings an old version back to edit.
* **Preview in email** tries your draft in an existing email or template. Nothing is saved to it.

The top bar shows **Live: v1 · used by 3**: the published version and how many emails and templates use it.

## Decide what marketers can change

Open the **Permissions** tab.

* **Lock entire component** keeps its content and styling fixed in emails and templates, including Assistant edits. People can still move, duplicate or remove the section.
* **Lock mobile styling** stops phone-only changes and device visibility changes. Copy and images can still be edited.
* Each field has a switch. On, marketers can edit it. Off, only templates set it, and emails use the template's content.

For each field you can also set:

* **Required before export**: the email can't be exported while it's empty.
* **Character limit**, or **Fewest items** and **Most items** for lists.
* **Starting content & guidance**: the content a new section starts with, and a note for the person filling it in.

The **AI instructions** box at the bottom tells the Assistant when to use this component, what to write in it, and when to pick something else.

## Show and hide properties

A show/hide property lets marketers switch part of a component off in one email without a different component. For example, a hero with an optional button, or a product card with an optional badge.

![The Permissions tab with Optional: marketers can switch it off ticked for an image](https://mintcdn.com/emaillove/Mq_WDCFfMdudNH2J/images/builder/design-systems/component-permissions.png?fit=max\&auto=format\&n=Mq_WDCFfMdudNH2J\&q=85\&s=7d18c21f863eaf4917be1d37e14ac9d0)

To set one up:

1. Open the component in Component Studio and go to **Permissions**.
2. On the part, tick **Optional: marketers can switch it off**.
3. Choose **On by default** or **Off by default**.
4. Publish the component.

By default, images, buttons and secondary text can be switched off. Untick **Optional** to keep a part in every email. A required part is only required while it's switched on.

In the editor, the parts appear under **Show in this email** when someone selects the section. Each part has its own switch. See [Sections and editing](https://help.emaillove.com/builder/editor/editing.md#show-or-hide-parts-of-a-section).

## Publish a component

Changes in Component Studio are a draft until you publish them.

1. Click the publish button at the top right. It names the next version, for example **Publish v2**. For small changes, such as the name or description, it says **Save** instead.
2. Add a note under **What changed?** if you like.
3. Click **Publish**.

Each publish makes a new version. **Discard** throws away the draft.

## How updates reach emails

Publishing doesn't change emails behind your back.

* **Templates** take the update by themselves, unless the update would change their content or they're in review or approved.
* **Emails** keep the version they have until someone accepts the update.

To update emails:

* After you publish, choose **Update it** or **Update all** in the dialog.
* On the design system's **Approval & updates** tab, under **Component updates**, click **Update emails** or review them one at a time.
* In an email, open the **⋯** menu at the top left and choose **Check for updates**.

Updating an email clears its approval, so it needs signing off again.

## Who can do this

Creating and changing components takes the **Design System Admin** setting. See [Roles and invites](https://help.emaillove.com/builder/team/overview.md#design-system-admin).

On the Free plan, a design system holds 20 components of your own. Components from Email Love's starter don't count.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.