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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://setka.gitbook.io/components-library/getting-started/components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.