Content Design System Manager (CDSM) Creating components (HTML, CSS)

Creating components (HTML, CSS)

In Setka Editor it is possible to compile components of different types. Any paragraph, title, grid, column, image, embed, divider, gallery, or container can be saved as a ready-made piece of code and used for a post layout.

 

Post

Post is the main container of any article created in Setka Editor.

HTML-structure:


    <div class="stk-post">
 <!-- post content -->
</div>

 

Example:


    <div class="stk-post">
 <p>first paragraph</p>
 <p>second paragraph</p>
</div>

 

Paragraphs and headings

Paragraph is a basic content unit in Setka Editor. Any text should be placed inside a paragraph. Along with the paragraphs there are also headings. Heading tags are: <h1> – <h6>.

HTML-structure:


    <p><!-- paragraph content --></p>

<h2 class="stk-theme_3883__style_large_header">
 <!-- heading H2 -->
</h2>
    
<h4 class="stk-theme_3883__style_small_header">
 <!-- heading H4 -->
</h4>

 

Paragraph can be inside:

      • Post
      • Column
      • Container

Paragraph can contain:

      • Text
      • tags <b>, <strong>, <i>, <em>, <a>, <u>, <del>, <sup>, <span>, <br>
      • inline-images <img>

Example:


    
<p>Text</p>

<p>Text with <a href="https://setka.io">link</a> to the website</p>

<p>Text with <strong>strong</strong> weight<br> with line break</p>

<p><img src="icon.png" alt="icon"> text</p>

<h2 class="stk-theme_3883__style_large_header">
 Large header
</h2>

 

Grid

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

HTML-structure:


    <div class="stk-grid" data-ce-tag="grid">
 <!-- column 1 -->
 <!-- column 2 -->
 <!-- column N -->
</div>

 

Grid can be inside:

      • Post
      • Column
      • Container

Grid can contain:

      • Column

Example:


    <div class="stk-grid" data-ce-tag="grid">
 <div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="3">
   <p>Text in the left column</p>
 </div>
 <div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="3">
   <p>Text in the right column</p>
 </div>
</div>

 

Сolumn

HTML-structure:


    <div class="stk-grid-col" data-ce-tag="grid-col" data-col-width=”{N}”>
  <!-- column content -->
</div>

You need to set the data-col-width attribute for a column which determines its width. This attribute can be an integer from 1 to the maximum number of columns in a given grid. For example, in a 6-column grid the data-col-width attribute can take values from 1 to 6.

Column can be inside:

      • Grid

 

Column can contain:

      • Paragraph
      • Grid
      • Image
      • Embed
      • Divider
      • Gallery
      • Container

Example:


    <div class="stk-grid" data-ce-tag="grid">
  <div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="1">
    <p>narrow left column</p>
  </div>
  <div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="1">
    <p>central column content</p>
  </div>
  <div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="1">
    <p>narrow right column</p>
  </div>
</div>

 

Image placeholder

Image placeholder consists of an image container (image-figure), a mask (mask), the image itself (<img>) and an image caption (<figcaption>). All 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 placeholder 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 placeholder can be inside:

      • Post
      • Column
      • Gallery
      • Container 

Image placeholder can contain:

      • Nothing

 

Embed code

Embed code structure is similar to an image one and can contain any HTML code inside the <code> element (including <style> or <script>).

 

HTML-structure:


    <figure class="stk-embed-figure" data-ce-tag="embed-figure">
 <code class="stk-code">
   <!-- HTML-code -->
 </div>
 <figcaption class="stk-description" data-ce-tag="description">
   <!-- embed code caption -->
 </figcaption>
</figure>

 

Embed code can be inside:

      • Post
      • Column
      • Container 

Embed code can contain:

      • Nothing

 

Divider

HTML-structure:


    <hr class="{CSS-divider class}">
 

 

Example:


    <hr class="stk-theme_3883__separator_basic_divider">

Divider can be inside:

      • Post
      • Column
      • Container

Divider can contain:

      • Nothing

 

Gallery

Gallery is a container for images. Gallery's JavaScript makes an animated slideshow both in the preview mode and on the page where a post is published.  

HTML-structure:


    <div class="stk-gallery" data-ce-tag="gallery">
 <code class="stk-code">
   <!-- HTML-code -->
 </div>
 <figcaption class="stk-description" data-ce-tag="description">
   <!-- embed caption -->
 </figcaption>
</div>

Gallery can be inside:

      • Post
      • Column
      • Container

Gallery can contain:

      • Image

 

Container

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

HTML-structure:


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

Also, container can be used to form block links:


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

Container can be inside:

      • Post
      • Column
      • Another container

Container сan store:

      • Paragraph
      • Grid
      • Image
      • Embedded code
      • Divider
      • Gallery
      • Another container

 

Component examples

Quote between dividers:


<hr class="stk-theme_3883__separator_basic_divider">
<p class="my-large-quote">
 Quote text
</p>
<hr class="stk-theme_3883__separator_basic_divider">

Nested containers:


    <div class="stk-container my-outer-block" data-ce-tag="container">
<div class="stk-container my-inner-block" data-ce-tag="container">
   <p>Text inside container</p> 
 </div>
</div>

Grid with side and main columns:


<div class="stk-grid" data-ce-tag="grid">
 <div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="2">
   <p class="stk-theme_3883__style_small_text">
     Small text in side column
   </p>
 </div>
 <div class="stk-grid-col" data-ce-tag="grid-col" data-col-width="4">
   <p>
     Text in main column
   </p>
 </div>
</div>

 

Learn how to add a component while editing your post in Setka Post Editor.

Related articles