> For the complete documentation index, see [llms.txt](https://setka.gitbook.io/help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://setka.gitbook.io/help-center/content-design-system-manager/components/creating-components-with-html-and-css/component-examples.md).

# Component examples

## Quote between dividers

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

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

```markup
<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 a post in Setka Post Editor:

{% content-ref url="/pages/-MQoBeG\_OEqo93HjX6-U" %}
[Components – reusable design elements](/help-center/content-design-system-manager/components.md)
{% endcontent-ref %}