Multiple Columns

Display text or content through multiple columns.

Example Effect

Column 1
This is the content of column 1

Column 2
This is the content of column 2

Column 3
This is the content of column 3

Code:

<Columns>
  <Column>
    **Column 1**
    This is the content of column 1
  </Column>
  <Column>
    **Column 2**
    This is the content of column 2
  </Column>
  <Column>
    **Column 3**
    This is the content of column 3
  </Column>
</Columns>

The column content follows markdown syntax.

Custom Styles

The multi-column component supports customizing styles using TailwindCSS. Both Columns and Column can add TailwindCSS styles through the className attribute.

Photographs of scenery

This photograph was captured by André Cook

Photographs of scenery

This photograph was captured by André Cook

Code:

<Columns>
    <Column className="bg-gray-100 p-3 rounded">
        <p className="text-lg font-bold text-pink-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook

        ![image.png](https://api.apidog.com/api/v1/projects/550276/resources/341101/image-preview)
    </Column>
    <Column className="bg-gray-100 p-3 rounded">
        <p class="text-lg font-bold text-orange-500">
            Photographs of scenery
        </p>
        This photograph was captured by André Cook

        ![image.png](https://api.apidog.com/api/v1/projects/550276/resources/341101/image-preview)
    </Column>
</Columns>

Example Effect#

Custom Styles#

Example Effect

Custom Styles