Multiple Columns
Display text or content through multiple columns.
Example Effect
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 ![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>
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>
Last modified: 5 months ago