The Col component is a "column". Usually used inside a Row component or in a Nova component with the Row parameter set to true.
Color
Color define the column color.
| Type | Default Value |
|---|
| string | null |
<NVBlock PX="4">
<NVRow>
<NVCol Size="4" Color="primary">Size 4</NVCol>
<NVCol Size="8" Color="secondary">Size 8</NVCol>
</NVRow>
<NVRow>
<NVCol Size="4" Color="orange-50">Size 4</NVCol>
<NVCol Size="8" Color="petrol-50">Size 8</NVCol>
</NVRow>
</NVBlock>
<div class="nv-block px-4">
<div class="nv-row">
<div class="nv-col w-4/12 primary">Size 4</div>
<div class="nv-col w-8/12 secondary">Size 8</div>
</div>
<div class="nv-row">
<div class="nv-col w-4/12 bg-orange-50">Size 4</div>
<div class="nv-col w-8/12 bg-petrol-50">Size 8</div>
</div>
</div>
<nv-block px="4">
<nv-row>
<nv-col size="4" color="primary">Size 4</nv-col>
<nv-col size="8" color="secondary">Size 8</nv-col>
</nv-row>
<nv-row>
<nv-col size="4" color="orange-50">Size 4</nv-col>
<nv-col size="8" color="petrol-50">Size 8</nv-col>
</nv-row>
</nv-block
<NvBlock px="4">
<NvRow>
<NvCol size="4" color="primary"> Size 4 </NvCol>
<NvCol size="8" color="secondary"> Size 8 </NvCol>
</NvRow>
<NvRow>
<NvCol size="4" color="orange-50"> Size 4 </NvCol>
<NvCol size="8" color="petrol-50"> Size 8 </NvCol>
</NvRow>
</NvBlock>
Size
Set the size of the column.
Available values are all integer between 1 and 12.
| Type | Default Value |
|---|
| string | sm |
<NVBlock PX="4">
<NVRow>
<NVCol Size="4" Color="primary">Size 4</NVCol>
<NVCol Size="8" Color="secondary">Size 8</NVCol>
</NVRow>
</NVBlock>
<div class="nv-block px-4">
<div class="nv-row">
<div class="nv-col w-4/12 primary">Size 4</div>
<div class="nv-col w-8/12 secondary">Size 8</div>
</div>
</div>
<nv-block px="4">
<nv-row>
<nv-col size="4" color="primary">Size 4</nv-col>
<nv-col size="8" color="secondary">Size 8</nv-col>
</nv-row>
</nv-block>
<NvBlock px="4">
<NvRow>
<NvCol size="4" color="primary"> Size 4 </NvCol>
<NvCol size="8" color="secondary"> Size 8 </NvCol>
</NvRow>
</NvBlock>
