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

# Email components

> What an email component is in allGood, how a component library stays safe to reuse, and where it sits relative to an Email Template and an Email.

A **component** is one reusable, approved piece of an email, such as a hero, a two-column offer row, a footer, or a divider. It's stored as a small file in MJML, the email-building language allGood uses, in your organization's own library, with a plain-language description of what it's for. It's the first of three layers in [email](https://docs.allgoodhq.com/mk/content/email/index.md), below [email templates](https://docs.allgoodhq.com/mk/content/email/templates/index.md) and [individual emails](https://docs.allgoodhq.com/mk/content/email/emails/index.md).

A component ships with real placeholder copy in it, meant to be edited directly. A template composes several components and adds the copy schema. An email is one layer up again: an actual message built from a template.

![The hero component rendered: eyebrow, headline, and a one-line proof statement, exactly as it ships before anyone edits it.](https://mintcdn.com/allgoodtechnologyinc/vWyFubp1-YTCUXDt/images/mk/content/email/components/hero-rendered-preview.png?fit=max\&auto=format\&n=vWyFubp1-YTCUXDt\&q=85\&s=74f79d649fe801aa71cb1669b2980b64)

The hero component rendered: eyebrow, headline, and a one-line proof statement, exactly as it ships before anyone edits it.

Every component documents its own edit boundary inline, as an `ag:` comment. **EDIT** covers copy, links, colors, and padding. **LOCKED** covers the element tree itself, and restructuring it is flagged by allGood's checker everywhere the component is used. Because every component is pre-built and approved, allGood's AI can also compose them per send without leaving your brand's approved patterns.

## Start here

> [card] [Editing an email component](https://docs.allgoodhq.com/mk/content/email/components/editing-an-email-component.md)
>
> What you can safely change, in plain language. No code needed.

> [card] [Setting up and reviewing components](https://docs.allgoodhq.com/mk/content/email/components/setting-up-and-reviewing-email-components.md)
>
> The Workshop, History, and Assets walkthrough: editing, versioning, and rollback.

> [card] [Write an email component](https://docs.allgoodhq.com/mk/developer/email/how-to-write-email-components.md)
>
> Structure a new component's MJML and document its EDIT and LOCKED boundary.

## Understand the format

> [card] [What MJML is](https://docs.allgoodhq.com/mk/content/email/components/what-mjml-is.md)
>
> The format components are written in, and why you rarely need to touch it.

> [card] [For developers](https://docs.allgoodhq.com/mk/developer/email/how-mjml-works.md)
>
> How MJML compiles, plus comparisons with Marketo, HubL, and hand-coded HTML.

If a component isn't rendering the way you'd expect, or a change doesn't fit the EDIT and LOCKED boundaries, contact [support@allgoodhq.com](mailto:support@allgoodhq.com) instead of working around it in the component's markup.


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