Sizes

Heights & widths

Class grammar: class="c-[h|w]-[xs|sm|md|lg|xl]".
For example:

c-h-sm: small height and line-height
c-w-lg: large width

$basic-sizes: (
  "xs": 28px, 
  "sm": 32px, 
  "md": 42px, 
  "lg": 52px, 
  "xl": 58px
);

$basic-sizes: (
  "xs": 28px, 
  "sm": 32px, 
  "md": 42px, 
  "lg": 52px, 
  "xl": 58px
);

scss

Heights

c-h-xs

c-h-sm

c-h-md

c-h-lg

c-h-xl

Widths

<h3>
  Heights
</h3>
<div class="sizes">
  <div class="c-h-xs item">
    c-h-xs
  </div>
  <div class="c-h-sm item">
    c-h-sm
  </div>
  <div class="c-h-md item">
    c-h-md
  </div>
  <div class="c-h-lg item">
    c-h-lg
  </div>
  <div class="c-h-xl item">
    c-h-xl
  </div>
</div>
<h3>
  Widths
</h3>
<div class="sizes">
  <div class="c-w-xs item">
    xs
  </div>
  <div class="c-w-sm item">
    sm
  </div>
  <div class="c-w-md item">
    md
  </div>
  <div class="c-w-lg item">
    lg
  </div>
  <div class="c-w-xl item">
    xl
  </div>
</div>
<style>
.sizes {
  --at-apply: 'grid sm:grid-cols-2 grid-cols-1 gap-4';
}
.item {
  --at-apply: 'pl-4 bg-svp-primary text-white';
}
</style>

<h3>
  Heights
</h3>
<div class="sizes">
  <div class="c-h-xs item">
    c-h-xs
  </div>
  <div class="c-h-sm item">
    c-h-sm
  </div>
  <div class="c-h-md item">
    c-h-md
  </div>
  <div class="c-h-lg item">
    c-h-lg
  </div>
  <div class="c-h-xl item">
    c-h-xl
  </div>
</div>
<h3>
  Widths
</h3>
<div class="sizes">
  <div class="c-w-xs item">
    xs
  </div>
  <div class="c-w-sm item">
    sm
  </div>
  <div class="c-w-md item">
    md
  </div>
  <div class="c-w-lg item">
    lg
  </div>
  <div class="c-w-xl item">
    xl
  </div>
</div>
<style>
.sizes {
  --at-apply: 'grid sm:grid-cols-2 grid-cols-1 gap-4';
}
.item {
  --at-apply: 'pl-4 bg-svp-primary text-white';
}
</style>

svelte

Font sizes

Class grammar: class="c-font-[xs|sm|md|lg|xl]".

$basic-font-sizes: (
  "xs": 10px, 
  "sm": 12px, 
  "md": 14px, 
  "lg": 16px, 
  "xl": 18px
);

$basic-font-sizes: (
  "xs": 10px, 
  "sm": 12px, 
  "md": 14px, 
  "lg": 16px, 
  "xl": 18px
);

scss

c-font-xs

c-font-sm

c-font-md

c-font-lg

c-font-xl

<div class="sizes">
  <div class="c-font-xs item">
    c-font-xs
  </div>
  <div class="c-font-sm item">
    c-font-sm
  </div>
  <div class="c-font-md item">
    c-font-md
  </div>
  <div class="c-font-lg item">
    c-font-lg
  </div>
  <div class="c-font-xl item">
    c-font-xl
  </div>
</div>
<style>
.sizes {
  --at-apply: 'grid sm:grid-cols-2 grid-cols-1 gap-4';
}
.item {
  --at-apply: 'pl-4 text-svp-primary';
}
</style>

<div class="sizes">
  <div class="c-font-xs item">
    c-font-xs
  </div>
  <div class="c-font-sm item">
    c-font-sm
  </div>
  <div class="c-font-md item">
    c-font-md
  </div>
  <div class="c-font-lg item">
    c-font-lg
  </div>
  <div class="c-font-xl item">
    c-font-xl
  </div>
</div>
<style>
.sizes {
  --at-apply: 'grid sm:grid-cols-2 grid-cols-1 gap-4';
}
.item {
  --at-apply: 'pl-4 text-svp-primary';
}
</style>

svelte

Padding and margin

Class grammar: class="c-[m|p][t|r|b|l|x|y]-[xs|sm|md|lg|xl]".
For example:

c-pt-sm: small top padding
c-mx-lg: large margin left and right
c-pa-xs: extra small padding for all directions

c-pa-xs

c-pa-sm

c-pa-md

c-pa-lg

c-pa-xl

<div class="sizes">
  <div class="c-pa-xs item">
    c-pa-xs
  </div>
  <div class="c-pa-sm item">
    c-pa-sm
  </div>
  <div class="c-pa-md item">
    c-pa-md
  </div>
  <div class="c-pa-lg item">
    c-pa-lg
  </div>
  <div class="c-pa-xl item">
    c-pa-xl
  </div>
</div>
<style>
.sizes {
  --at-apply: 'grid sm:grid-cols-2 grid-cols-1 gap-4';
}
.item {
  --at-apply: 'b-1 b-svp-primary b-solid h-[100px] flex items-center justify-center bg-gray-2 dark:bg-gray-8 bg-clip-content';
}
</style>

<div class="sizes">
  <div class="c-pa-xs item">
    c-pa-xs
  </div>
  <div class="c-pa-sm item">
    c-pa-sm
  </div>
  <div class="c-pa-md item">
    c-pa-md
  </div>
  <div class="c-pa-lg item">
    c-pa-lg
  </div>
  <div class="c-pa-xl item">
    c-pa-xl
  </div>
</div>
<style>
.sizes {
  --at-apply: 'grid sm:grid-cols-2 grid-cols-1 gap-4';
}
.item {
  --at-apply: 'b-1 b-svp-primary b-solid h-[100px] flex items-center justify-center bg-gray-2 dark:bg-gray-8 bg-clip-content';
}
</style>

svelte

Rounded sizes

Class grammar: class="c-rounded-[t|r|b|l|tr|tl|br|bl]-[xs|sm|md|lg|xl]".
For example:

c-rounded-tr-md - top right medium border radius
c-rounded-l-lg - top left and bottom left large border radius
c-rounded-sm - small border radius for all corners

$basic-rounded-sizes: (
  "xs": 4px, 
  "sm": 4px, 
  "md": 8px, 
  "lg": 12px, 
  "xl": 12px
);

$basic-rounded-sizes: (
  "xs": 4px, 
  "sm": 4px, 
  "md": 8px, 
  "lg": 12px, 
  "xl": 12px
);

scss

c-rounded-xs

c-rounded-sm

c-rounded-md

c-rounded-lg

c-rounded-xl

<div class="sizes">
  <div class="c-rounded-xs item">
    c-rounded-xs
  </div>
  <div class="c-rounded-sm item">
    c-rounded-sm
  </div>
  <div class="c-rounded-md item">
    c-rounded-md
  </div>
  <div class="c-rounded-lg item">
    c-rounded-lg
  </div>
  <div class="c-rounded-xl item">
    c-rounded-xl
  </div>
</div>
<style>
.sizes {
  --at-apply: 'grid sm:grid-cols-2 grid-cols-1 gap-4';
}
.item {
  --at-apply: 'flex justify-center items-center bg-svp-primary text-white h-[100px]';
}
</style>

<div class="sizes">
  <div class="c-rounded-xs item">
    c-rounded-xs
  </div>
  <div class="c-rounded-sm item">
    c-rounded-sm
  </div>
  <div class="c-rounded-md item">
    c-rounded-md
  </div>
  <div class="c-rounded-lg item">
    c-rounded-lg
  </div>
  <div class="c-rounded-xl item">
    c-rounded-xl
  </div>
</div>
<style>
.sizes {
  --at-apply: 'grid sm:grid-cols-2 grid-cols-1 gap-4';
}
.item {
  --at-apply: 'flex justify-center items-center bg-svp-primary text-white h-[100px]';
}
</style>

svelte

Suggest changes to this page

Last update at: 2023/08/13 13:04:55

On this page

Heights & widths Font sizes Padding and margin Rounded sizes