Light Dark System

Style

<zn-style> | ZnStyle
Since ?

Examples

Colours

Default Style

Blue Color

Indigo Color

Info Style

Error Style

Success Style

Warning Style

Primary Style

Accent Style

 
<zn-style>
  <p>Default Style</p>
</zn-style>
<zn-style color="blue">
  <p>Blue Color</p>
</zn-style>
<zn-style color="indigo">
  <p>Indigo Color</p>
</zn-style>
<zn-style info>
  <p>Info Style</p>
</zn-style>
<zn-style error>
  <p>Error Style</p>
</zn-style>
<zn-style success>
  <p>Success Style</p>
</zn-style>
<zn-style warning>
  <p>Warning Style</p>
</zn-style>
<zn-style primary>
  <p>Primary Style</p>
</zn-style>
<zn-style accent>
  <p>Accent Style</p>
</zn-style>

Padding

Left Padding Right Padding Top Padding Bottom Padding X Padding Y Padding Top Left Padding Top Right Bottom Left Padding X Bottom Padding XY Padding ALL Padding 
<zn-style border pad=l>Left Padding</zn-style>
<zn-style border pad=r>Right Padding</zn-style>
<zn-style border pad=t>Top Padding</zn-style>
<zn-style border pad=b>Bottom Padding</zn-style>
<zn-style border pad=x>X Padding</zn-style>
<zn-style border pad=y>Y Padding</zn-style>
<zn-style border pad=tl>Top Left Padding</zn-style>
<zn-style border pad=trbl>Top Right Bottom Left Padding</zn-style>
<zn-style border pad=bx>X Bottom Padding</zn-style>
<zn-style border pad=xy>XY Padding</zn-style>
<zn-style border pad=a>ALL Padding</zn-style>

Margin

Left Margin
Right Margin
Top Margin
Bottom Margin
X Margin
Y Margin
Top Left Margin
Top Right Bottom Left Margin
X Bottom Margin
XY Margin
ALL Margin
<style>
.style-bg{
  background-color: #f0f0f0;
  margin: 5px;
  display: inline-block;
}
</style>
<div class="style-bg"><zn-style border margin=l>Left Margin</zn-style></div>
<div class="style-bg"><zn-style border margin=r>Right Margin</zn-style></div>
<div class="style-bg"><zn-style border margin=t>Top Margin</zn-style></div>
<div class="style-bg"><zn-style border margin=b>Bottom Margin</zn-style></div>
<div class="style-bg"><zn-style border margin=x>X Margin</zn-style></div>
<div class="style-bg"><zn-style border margin=y>Y Margin</zn-style></div>
<div class="style-bg"><zn-style border margin=tl>Top Left Margin</zn-style></div>
<div class="style-bg"><zn-style border margin=trbl>Top Right Bottom Left Margin</zn-style></div>
<div class="style-bg"><zn-style border margin=bx>X Bottom Margin</zn-style></div>
<div class="style-bg"><zn-style border margin=xy>XY Margin</zn-style></div>
<div class="style-bg"><zn-style border margin=a>ALL Margin</zn-style></div>

Auto Margin

Auto Margin
Left Margin
Right Margin
Top Margin
Bottom Margin
X Margin
Y Margin
Top Left Margin
Top Right Bottom Left Margin
X Bottom Margin
XY Margin
ALL Margin
<style>
.style-abg{
  background-color: #f0f0f0;
  margin: 5px;
  width: 400px;
  height: 200px;
  display: flex;
}
</style>
<div class="style-abg"><zn-style border a-margin=a>Auto Margin</zn-style></div>
<div class="style-abg"><zn-style border a-margin=l>Left Margin</zn-style></div>
<div class="style-abg"><zn-style border a-margin=r>Right Margin</zn-style></div>
<div class="style-abg"><zn-style border a-margin=t>Top Margin</zn-style></div>
<div class="style-abg"><zn-style border a-margin=b>Bottom Margin</zn-style></div>
<div class="style-abg"><zn-style border a-margin=x>X Margin</zn-style></div>
<div class="style-abg"><zn-style border a-margin=y>Y Margin</zn-style></div>
<div class="style-abg"><zn-style border a-margin=tl>Top Left Margin</zn-style></div>
<div class="style-abg"><zn-style border a-margin=trbl>Top Right Bottom Left Margin</zn-style></div>
<div class="style-abg"><zn-style border a-margin=bx>X Bottom Margin</zn-style></div>
<div class="style-abg"><zn-style border a-margin=xy>XY Margin</zn-style></div>
<div class="style-abg"><zn-style border a-margin=a>ALL Margin</zn-style></div>

Border

Accepts any combination of t, b, l, r to render specific sides. Use a (or the equivalent tblr) as a shortcut for all four sides. The bare border attribute (no value) is equivalent to border="a" and is kept for backward compatibility.

Top only Bottom only Left only Right only Top + Bottom Left + Right Top + Left All sides (a) All sides (bare attribute) 
<zn-style border="t" pad=a>Top only</zn-style>
<zn-style border="b" pad=a>Bottom only</zn-style>
<zn-style border="l" pad=a>Left only</zn-style>
<zn-style border="r" pad=a>Right only</zn-style>
<zn-style border="tb" pad=a>Top + Bottom</zn-style>
<zn-style border="lr" pad=a>Left + Right</zn-style>
<zn-style border="tl" pad=a>Top + Left</zn-style>
<zn-style border="a"  pad=a>All sides (a)</zn-style>
<zn-style border      pad=a>All sides (bare attribute)</zn-style>

Size

Adjusts font size in five steps mapped to the zinc font-size tokens. m is the default and applies no class.

value token
xs --zn-font-size-x-small
s --zn-font-size-small
m inherits (no class applied)
l --zn-font-size-large
xl --zn-font-size-x-large
Extra small Small Medium (default) Large Extra large 
<zn-style size="xs">Extra small</zn-style>
<zn-style size="s">Small</zn-style>
<zn-style size="m">Medium (default)</zn-style>
<zn-style size="l">Large</zn-style>
<zn-style size="xl">Extra large</zn-style>

Muted

Dims the content with reduced opacity. Useful for placeholder-like values, em-dashes for empty cells, or any text you want visually de-emphasized without changing its colour.

Regular text Muted text — 
<zn-style>Regular text</zn-style>
<zn-style muted>Muted text</zn-style>
<zn-style muted>&mdash;</zn-style>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.51/dist/components/style/style.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.51/dist/components/style/style.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/style/style.js';