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:

<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:

<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:

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

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):

<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:

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

Containers can also be used to create block links:

<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

Go to the “How to create components” page in the Help Center for more information on components.

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.