<p>See <a href="/docs/markdown/components/components" title="Components 101">Components 101</a> to learn more about Mixa Components</p>
<p>Sometimes you want to show content side-by-side. That's where Column component comes in handy. You can have up to 12 columns. Each child within the column component will have its own column.</p>
<p>Make sure you leave an empty line between children to have a separate column</p>
<pre><code>:::column
Text on the left

Text on the right
:::
</code></pre>
<div class="preview" attrs="{&#x22;class&#x22;:&#x22;preview&#x22;}"><column attrs="{}"><p>Text on the left</p><p>Text on the right</p></column></div>
<p>Do not leave any empty line between children if you want to make them as part of the same column</p>
<pre><code>:::column
Text on the left
with multi-line content

Image on the right
![](https://cdn.pixabay.com/photo/2021/05/01/09/59/city-6220689_960_720.jpg)
:::
</code></pre>
<div class="preview" attrs="{&#x22;class&#x22;:&#x22;preview&#x22;}"><column attrs="{}"><p>Text on the left<br>
with multi-line content</p><p>Image on the right<br>
<img src="https://cdn.pixabay.com/photo/2021/05/01/09/59/city-6220689_960_720.jpg" alt=""></p></column></div>
<p>Or use grouping with <code>:::div</code> to not rely on empty lines</p>
<pre><code>::::column
:::div
Text on the left

still on the left

and some more
:::
:::div
Text on the right
still on the right
and some more
:::
::::
</code></pre>
<div class="preview" attrs="{&#x22;class&#x22;:&#x22;preview&#x22;}"><column attrs="{}"><div attrs="{}"><p>Text on the left</p><p>still on the left</p><p>and some more</p></div><div attrs="{}"><p>Text on the right<br>
still on the right<br>
and some more</p></div></column></div>
<h2 id="column-count"><a aria-hidden="true" tabindex="-1" href="#column-count"><span class="icon icon-link"></span></a>Column count</h2>
<p>You can provide fixed column count to wrap children. Without <code>count=2</code>, the following example would create 4 columns</p>
<pre><code>:::column{count=2}
top-left column

top-right column

bottom-left column

bottom-right column
:::
</code></pre>
<div class="preview" attrs="{&#x22;class&#x22;:&#x22;preview&#x22;}"><column count="2" attrs="{&#x22;count&#x22;:&#x22;2&#x22;}"><p>top-left column</p><p>top-right column</p><p>bottom-left column</p><p>bottom-right column</p></column></div>
<h2 id="responsive"><a aria-hidden="true" tabindex="-1" href="#responsive"><span class="icon icon-link"></span></a>Responsive</h2>
<p>If you want columns to be shown vertically on smaller screen sizes, you can pass <code>responsive</code> attribute</p>
<pre><code>:::column{responsive}
left column - will be top column in smaller screen

right column - will be bottom column in smaller screen
:::
</code></pre>
<div class="preview" attrs="{&#x22;class&#x22;:&#x22;preview&#x22;}"><column responsive="" attrs="{&#x22;responsive&#x22;:&#x22;&#x22;}"><p>left column - will be top column in smaller screen</p><p>right column - will be bottom column in smaller screen</p></column></div>

Creating your site

Installing Mixa Obsidian Plugin

Setting up a Blog With Obsidian/Markdown

Blog

Resume

Using Mixa With Notion

Components

Carousel

Column

Hero

Video

Callouts

Image

Link

Math

Text

Site Editor

Setup

SEO and Analytics

Navigation

Code

Features

Theme

Sitemap and RSS

Search

Home Page

Scheduled Publishing

Static Files

Frontmatter

Quick Start

quick-start

templates

Notion

notion

components

Syntax

syntax

Markdown

markdown

site-editor

features

docs