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

# Simple Elements

> The building blocks: text, buttons, images, separators, and social links

## Overview

**Simple elements** are the basic blocks you can add directly to your emails and components. These are leaf elements that don't contain children—they're the actual content of your emails.

## Element Types

### Text Element

The text element displays text content, optionally with a link.

<CardGroup cols={2}>
  <Card title="Key Properties">
    * **Content**: The text to display
    * **Text Style**: Style from your Style Library
    * **Color**: Text color (from Style Library)
    * **Link**: Optional URL to make it a link
    * **Alignment**: Left, center, right, justify
  </Card>

  <Card title="Advanced Properties">
    * **Padding**: Inner spacing
    * **Background**: Background color
    * **Border Radius**: Rounded corners
    * **Border**: Width and color
  </Card>
</CardGroup>

**Use cases**: Headings, paragraphs, text with links, callouts.

**Toolbar shortcut**: Press `T` or click the text icon.

***

### Button Element

Creates a clickable button with a link.

<CardGroup cols={2}>
  <Card title="Key Properties">
    * **Content**: Button text
    * **Link**: Destination URL
    * **Button Style**: Style from your Style Library
    * **Alignment**: Button alignment
  </Card>

  <Card title="Visual Properties">
    * **Background**: Background color
    * **Padding**: Inner spacing
    * **Border Radius**: Rounded corners
    * **Border**: Width and color
  </Card>
</CardGroup>

**Use cases**: Call to Action (CTA), important links, action buttons.

**Toolbar shortcut**: Press `B` or click the button icon.

<Info>
  Buttons should use the Style Library via **Button Style** rather than manually defining colors. This ensures brand consistency.
</Info>

***

### Image Element

Displays an image in the email.

<CardGroup cols={2}>
  <Card title="Key Properties">
    * **Source**: Image URL
    * **Alt Text**: Description for accessibility (required)
    * **Link**: Optional URL (makes image clickable)
    * **Dimensions**: Width and height
  </Card>

  <Card title="Advanced Properties">
    * **Padding**: Spacing around image
    * **Border Radius**: Rounded corners
    * **Border**: Width and color
    * **Alignment**: Left, center, right
  </Card>
</CardGroup>

**Use cases**: Logos, product photos, illustrations, hero images.

**Toolbar shortcut**: Press `I` or click the image icon.

<Warning>
  Images must be hosted on a publicly accessible server (public URL). Mailkick can proxy images for better delivery and caching.
</Warning>

***

### Separator Element

Creates a horizontal dividing line.

<CardGroup cols={2}>
  <Card title="Key Properties">
    * **Thickness**: Line thickness
    * **Color**: Color from Style Library
    * **Style**: Solid, dashed, dotted
  </Card>

  <Card title="Advanced Properties">
    * **Width**: Separator width
    * **Padding**: Vertical spacing around separator
    * **Alignment**: Left, center, right
  </Card>
</CardGroup>

**Use cases**: Section dividers, end of content markers, visual breaks.

**Toolbar shortcut**: Press `S` or click the separator icon.

***

### Social Element

Displays social media icons with links.

<CardGroup cols={2}>
  <Card title="Key Properties">
    * **Social Links**: List of social platforms (Facebook, Twitter, Instagram, LinkedIn, etc.)
    * **Alignment**: Left, center, right
    * **Size**: Icon size
  </Card>

  <Card title="Advanced Properties">
    * **Gap**: Spacing between icons
    * **Color**: Icon color (from Style Library)
    * **Background**: Optional background
  </Card>
</CardGroup>

**Use cases**: Footer social links, header share buttons.

**Toolbar shortcut**: Press `R` or click the social icon.

## Using Elements in the Editor

All simple elements can be added via the **toolbar** at the top of the editor.

## Style Library Integration

All simple elements can use **design tokens** from the Style Library:

* **Colors**: For text, backgrounds, and borders
* **Text Styles**: For text and button elements
* **Button Styles**: Pre-defined button appearances
* **Link Styles**: For text links

<Info>
  Using the Style Library guarantees visual consistency and makes global design updates effortless.
</Info>