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

# Overview

> Explore all component types available in the Content Editor

<img src="https://mintcdn.com/reelevant/10tXeCE_biVlzX8s/images/contents/components-toolbar-v2.png?fit=max&auto=format&n=10tXeCE_biVlzX8s&q=85&s=13589f70673ab103aaa6f978fea69205" alt="Content editor toolbar showing component type buttons" width="1280" height="800" data-path="images/contents/components-toolbar-v2.png" />

## Component Types

Components are the building blocks of your content templates. Each component type serves a specific purpose and has its own configuration options.

<CardGroup cols={2}>
  <Card title="Text" icon="font" href="/product-guide/contents/components/text">
    Rich text with styling, dynamic variables, and transformations.
  </Card>

  <Card title="Image" icon="image" href="/product-guide/contents/components/image">
    Static or data-bound images from URLs or datasources.
  </Card>

  <Card title="Shapes" icon="shapes" href="/product-guide/contents/components/shape">
    Rectangle, Circle, and Triangle with fill, stroke, and border radius.
  </Card>

  <Card title="Barcode" icon="barcode" href="/product-guide/contents/components/barcode">
    Code128 and EAN barcodes with configurable values.
  </Card>

  <Card title="Countdown" icon="clock" href="/product-guide/contents/components/countdown">
    Animated countdown timers to a target date.
  </Card>

  <Card title="Map" icon="map" href="/product-guide/contents/components/map">
    Google Maps with configurable markers, zoom, and style.
  </Card>

  <Card title="Progress Bar & Arc" icon="chart-simple" href="/product-guide/contents/components/progress">
    Visual progress indicators with current/max values.
  </Card>
</CardGroup>

## Shared Configuration

All components share these common configuration properties:

| Property             | Description                                                                                  |
| -------------------- | -------------------------------------------------------------------------------------------- |
| **Layout**           | X position, Y position, Width, Height of the component on the canvas.                        |
| **Size**             | Width and height with an optional **Keep aspect ratio** toggle.                              |
| **Rotation**         | Rotation angle in degrees.                                                                   |
| **Appearance**       | Background color, opacity, and other visual properties.                                      |
| **Redirection link** | A URL that users navigate to when clicking the component. Can be static or data-bound.       |
| **Conditions**       | Visibility rules based on data values. See [Conditions](/product-guide/contents/conditions). |

<Tip>
  Every component property that accepts a value can also accept a **variable** from a connected [datasource](/product-guide/contents/data-binding). Click the variable picker icon next to a field to bind it to dynamic data.
</Tip>