> ## 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.

# Pre-Built Components

> How to find, add, and customize Email Love's pre-built email components to speed up your design workflow

Email Love ships with a library of pre-built components (headers, content blocks, CTAs, galleries, footers, and more) that are already structured with correct MJML hierarchy, tested across email clients, and optimized for responsive rendering. Instead of building every section from scratch, start with a component and customize it to match your brand.

This guide covers how to find components, add them to your email, and customize them for your needs.

## The Assets Panel

All pre-built components live in Figma's **Assets** panel (left sidebar). Open it by clicking the Assets icon or pressing **Option + 2** (Mac) / **Alt + 2** (Windows). Inside, you'll find components organized by category:

* **Headers**: Logo placement, navigation bars, preheader text
* **Content Blocks**: Text-heavy sections, feature highlights, article layouts
* **Featured Items**: Product showcases, image-text combos, spotlight sections
* **Calls to Action (CTAs)**: Button blocks, multi-button layouts, promotional banners
* **Galleries**: Image grids, product carousels, thumbnail layouts
* **Footers**: Social links, legal text, unsubscribe blocks, contact info

You'll also see two helpful sections at the top of the Assets panel:

* **Recently Used**: Quick access to components you've used before, helping you stay consistent across emails
* **Customs**: Any components you've saved from your own designs (see "Saving Custom Components" below)

## Adding a Component to Your Email

<Steps>
  <Step title="Open the Assets panel">
    Open the **Assets** panel in the left sidebar.
  </Step>

  <Step title="Find the component you need">
    Browse by category or use the search bar.
  </Step>

  <Step title="Drag it onto your email frame">
    Drag the component from the Assets panel onto your email frame.
  </Step>

  <Step title="Position it in the hierarchy">
    The component should sit inside a **wrapper** or directly in the email frame.
  </Step>

  <Step title="Done">
    The plugin will recognize the component's MJML structure automatically. No additional setup needed.
  </Step>
</Steps>

<Tip>
  If you're not sure which component to use, try a few. Dropping a component onto the canvas is non-destructive. You can always delete it and try another.
</Tip>

## Customizing a Component

Pre-built components are designed to look polished out of the box, but you'll want to adapt them to your brand. There are three ways to customize:

### 1. Figma Native Tools

You can edit text, swap images, and adjust colors directly in Figma, just like any other design element. Select the layer you want to change and use Figma's built-in tools:

* Double-click text layers to edit copy
* Select image layers and use "Fill" to swap images
* Change colors on any layer through Figma's color picker
* Resize frames by dragging handles (the plugin respects responsive constraints)

### 2. Plugin Properties Tab

Select any element inside the component and open the **Properties** tab in the Email Love plugin. Here you can configure email-specific settings that Figma doesn't handle natively:

* **Links**: Add URLs to buttons, images, and text
* **Alt text**: Set image alt text for accessibility
* **Alignment**: Control content alignment within columns
* **Spacing**: Fine-tune padding that maps to the HTML output

### 3. Appearance & Mobile Styles

* **Appearance Tab**: Set dark mode overrides, text style presets, and global color schemes
* **Mobile Styles Tab**: Override font sizes, padding, and visibility for mobile devices

See the Appearance Tab guide and Mobile Optimization guide for detailed walkthroughs.

## Saving Custom Components

Once you've customized a component to match your brand, you can save it to the Assets panel for reuse:

<Steps>
  <Step title="Select the component">
    Select the component or frame you want to save.
  </Step>

  <Step title="Open Assets in the plugin">
    Open the **Assets** section in the plugin.
  </Step>

  <Step title="Add your component">
    Click to add your customized component.
  </Step>

  <Step title="Name it clearly">
    Give it a clear, descriptive name (e.g., "Brand Header, Dark" or "CTA, Primary Blue").
  </Step>
</Steps>

Saved components appear in the **Customs** section of the Assets panel. If the component you're saving is a Figma Component or Instance, the plugin automatically **links** it to the source. You'll see a blue chain icon on the thumbnail. Linked components stay in sync: when you update the source in Figma, the saved version updates automatically. And when you place a linked component into an email, it creates a native Figma instance that stays connected to the parent.

<Tip>
  Create a naming convention for your custom components. Prefixing with the category ("Header", "Footer", "CTA") keeps things organized as your library grows. For cross-file use, publish your components to a Figma Team Library so the link works from any file.
</Tip>

## Best Practices

**Start with components, customize from there.** Building from pre-built components ensures your MJML structure is correct and your email will render properly across clients. Customizing an existing component is faster and safer than building one from scratch.

**Don't break the hierarchy.** Pre-built components come with the correct nesting (wrapper, then section, then column, then content). If you need to restructure a component, make sure you maintain this hierarchy or you'll encounter errors during export.

**Test after significant changes.** If you've heavily modified a component, use the Preview feature to check desktop, mobile, and dark mode rendering before exporting.

**Build a brand library.** Save your most-used customized components to the Assets panel. A library of 10-15 branded components (header, footer, hero, CTA, text block, image block, spacer) covers most email needs and dramatically speeds up production.

## Troubleshooting

**Component doesn't appear in the Assets panel**

Make sure you're looking in the correct Figma file. Components are file-specific unless they're part of a shared library. If you saved a custom component in a different file, you'll need to publish it as a shared library or copy it over.

**Component looks different after export**

This is usually a CSS support issue with specific email clients. Check the Email Client Compatibility Matrix to see which CSS properties are supported where. Border radius, custom fonts, and background images are the most common culprits.

**Component breaks on mobile**

Open the Mobile Styles tab and check that the component has appropriate mobile overrides. Columns automatically stack on mobile, so verify the stacking order looks right in Preview.

**Copied component loses its link to the original**

When you copy-paste a component (rather than dragging from Assets), it becomes a detached instance. This means changes to the original component won't update the copy. If you need linked instances, always drag from the Assets panel.

## Next Steps

* **Want to build your own components?** See the Build Your Own Components collection for guides on creating custom elements.
* **Need to customize further?** Check the Styling Components guides for detailed control over backgrounds, padding, typography, and more.
* **Ready to export?** Head to the Export Overview to learn how to send your email to your ESP.

*Need help? Reach out at [support@emaillove.com](mailto:support@emaillove.com) or join our Discord community.*