Column
pam-Column="[2-5]" use the native CSS multi-column layout
to allow easy definition of multiple columns in a text. Onte to five columns are supported.
Sed consequat vulputate ornare. Etiam non orci quis ligula posuere pretium. Duis a mollis turpis. Curabitur tincidunt, orci ac pulvinar auctor, libero eros luctus dui, non posuere dolor neque ultrices dolor. Suspendisse vehicula, erat vel malesuada bibendum, purus magna rhoncus sem, in faucibus lacus leo a massa. Aliquam metus massa, mattis eu lorem ac, vestibulum rutrum nunc. Donec sagittis quam nec libero semper lobortis.
Markup
<p pam-Column="3">Sed consequat vulputate ornare. Etiam non orci quis ligula posuere pretium. Duis a mollis turpis. Curabitur tincidunt, orci ac pulvinar auctor, libero eros luctus dui, non posuere dolor neque ultrices dolor. Suspendisse vehicula, erat vel malesuada bibendum, purus magna rhoncus sem, in faucibus lacus leo a massa. Aliquam metus massa, mattis eu lorem ac, vestibulum rutrum nunc. Donec sagittis quam nec libero semper lobortis.</p>Width
Use pam-Column="width:[small|medium|large]" to declare the min-width of the columns.
Small is 100px, medium is 200px and large is 400px.
Sed consequat vulputate ornare. Etiam non orci quis ligula posuere pretium. Duis a mollis turpis. Curabitur tincidunt, orci ac pulvinar auctor, libero eros luctus dui, non posuere dolor neque ultrices dolor. Suspendisse vehicula, erat vel malesuada bibendum, purus magna rhoncus sem, in faucibus lacus leo a massa. Aliquam metus massa, mattis eu lorem ac, vestibulum rutrum nunc. Donec sagittis quam nec libero semper lobortis.
Markup
<p pam-Column="3 width:large">Sed consequat vulputate ornare. Etiam non orci quis ligula posuere pretium. Duis a mollis turpis. Curabitur tincidunt, orci ac pulvinar auctor, libero eros luctus dui, non posuere dolor neque ultrices dolor. Suspendisse vehicula, erat vel malesuada bibendum, purus magna rhoncus sem, in faucibus lacus leo a massa. Aliquam metus massa, mattis eu lorem ac, vestibulum rutrum nunc. Donec sagittis quam nec libero semper lobortis.</p>Gap
Use pam-Column="gap:[small|medium|large]" to adjust the gutter, or the space
between columns. Small is 8px, medium is 16px (default) and large is 24px.
Sed consequat vulputate ornare. Etiam non orci quis ligula posuere pretium. Duis a mollis turpis. Curabitur tincidunt, orci ac pulvinar auctor, libero eros luctus dui, non posuere dolor neque ultrices dolor. Suspendisse vehicula, erat vel malesuada bibendum, purus magna rhoncus sem, in faucibus lacus leo a massa. Aliquam metus massa, mattis eu lorem ac, vestibulum rutrum nunc. Donec sagittis quam nec libero semper lobortis.
Markup
<p pam-Column="3 gap:large">Sed consequat vulputate ornare. Etiam non orci quis ligula posuere pretium. Duis a mollis turpis. Curabitur tincidunt, orci ac pulvinar auctor, libero eros luctus dui, non posuere dolor neque ultrices dolor. Suspendisse vehicula, erat vel malesuada bibendum, purus magna rhoncus sem, in faucibus lacus leo a massa. Aliquam metus massa, mattis eu lorem ac, vestibulum rutrum nunc. Donec sagittis quam nec libero semper lobortis.</p>Hooks
.hook-column
Variables
These are all the component specific variables that can be used for customization.
| Name | Value |
|---|---|
| @column-count | 1 |
| @column-width | auto |
| @column-width-small | 100px |
| @column-width-medium | 200px |
| @column-width-large | 400px |
| @column-gap-small | @space-8 |
| @column-gap-medium | @space-16 |
| @column-gap-large | @space-24 |