# Components

Components are the base elements that are used for creating components: grids and columns, image placeholders, and containers. You can do a lot with these simple building blocks! Read below to learn more about using each one.

## **Grids and Сolumns**

A layout grid is used as the framework for a multi-column layout. Each grid consists of a container (stk-grid) and columns (stk-grid-col). Images, paragraphs, and all other content types are placed within the columns.

Grid HTML structure:

```markup
<div class="stk-grid" data-ce-tag="grid">
  <div class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col" data-col-width="4">
    <p class="stk-reset">Components are placed within the columns.</p>
  </div>
  <div data-col-width="2" class="stk-grid-col stk-grid-col_empty" data-ce-tag="grid-col">
  <p class="stk-reset ce-element--empty stk-element_no-text"></p>
  </div>
</div>
```

Grids can be used inside:

* Posts
* Columns
* Containers

Grid columns can contain:

* Paragraphs
* Grids
* Images
* Embeds
* Dividers
* Galleries
* Containers

## **Image placeholder**

An image placeholder consists of an image container (image-figure), a mask (mask), the image itself (\<img>), and an image caption (\<figcaption>). All of these elements are mandatory except for the caption.

HTML structure:

```markup
<figure class="stk-image-figure" data-ce-tag="image-figure">
<div class="stk-mask" data-ce-tag="mask">
  <img src="path/to/image.jpg" alt="">
</div>
<figcaption class="stk-description" data-ce-tag="description">
  <!-- image caption -->
</figcaption>
</figure>
```

Image placeholders can also contain a link:

```markup
<figure class="stk-image-figure" data-ce-tag="image-figure">
  <div class="stk-mask" data-ce-tag="mask">
    <a class="stk-link" href="https://setka.io">
      <img src="path/to/image.jpg" alt="">
    </a>
  </div>
  <figcaption class="stk-description" data-ce-tag="description">
    <!-- image caption -->
  </figcaption>
</figure>
```

&#x20;Image placeholders can be inside:

* Posts
* Columns
* Galleries
* Containers

Image placeholders can contain:

* No other elements

## **Container**

A container is a universal entity for any block type that can not be created using the standard Setka Editor elements. It is possible to assign any class or attribute for a container as well as for any other elements.

Basic container HTML structure (**the \`data-ce-tag="container"\` attribute is mandatory**):

```markup
<div class="stk-container" data-ce-tag="container">
  <!-- content --> 
</div>
```

Containers may have a name, which displays in the post breadcrumbs and makes navigation easier:

```markup
<div class="stk-container" data-ce-tag="container" data-container-name="Header section">
  <!-- content --> 
</div>
```

Containers can also be used to create block links:

```markup
<a class="stk-container stk-container-link" data-ce-tag="container" href="https://setka.io">
  <!-- content -->
</a>
```

Containers can be inside:

* Posts
* Columns
* Another container

Containers сan contain:

* Paragraphs
* Grids
* Images
* Embed codes
* Dividers
* Galleries
* Another container

{% hint style="info" %}
Go to the “[How to create components](https://app.gitbook.com/@setka/s/help-center/content-design-system-manager/creating-components-with-html-and-css)” page in the Help Center for more information on components.
{% endhint %}

## **Styling**

When you properly copy the code of a particular component into your Style Manager, all elements will inherit your style: fonts, font sizes, text color, text dividers, etc.