How To Install SK Reference
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Typography
sk: activates fluid typography
sk-content: Styles main content with readable paragraph with max-width of 70ch.
tracking-wide: Increases letter spacing to 0.1em.
tracking-wider: Increases letter spacing to 0.15em.
tracking-tight: Reduces letter spacing to -0.02em.
text-left: Aligns text to the left.
text-center: Centers text.
text-right: Aligns text to the right.
text-justify: Justifies text.
Font Weight
font-100 to font-900: Sets font weight from 100 (thin) to 900 (extra bold).
Custom Text
heading-7xl: Extra-large heading with tight line height and bold weight.
heading-6xl: Very large heading with tight line height and bold weight.
heading-5xl: Large heading with tight line height and bold weight.
heading-4xl: Medium-large heading with tight line height and bold weight.
heading-3xl: Medium heading with snug line height and bold weight.
heading-2xl: Slightly smaller heading with snug line height and bold weight.
heading-xl: Standard large heading with snug line height and bold weight.
heading-l: Medium heading with normal line height and bold weight.
heading-m: Smaller heading with normal line height and medium weight.
heading-s: Smallest heading with relaxed line height and medium weight.
Custom Headings
heading-6xl Very large heading with bold weight (900).
heading-5xl Large heading with bold weight (800).
heading-4xl Medium-large heading with bold weight (800).
heading-3xl Medium heading with bold weight.
heading-2xl Slightly smaller heading and bold weight.
heading-xl Standard large heading
heading-l Medium heading
heading-m Smaller heading
heading-s Smallest heading
Font Colors
text-pri-100 to text-pri-900: Applies primary color shades for text.
text-acc-100 to text-acc-900: Applies accent color shades for text.
text-gray-100 to text-gray-900: Applies grayscale shades for text.
Background Colors
bg-pri-50 to bg-pri-900: Applies primary color shades for backgrounds (light to dark).
bg-acc-50 to bg-acc-900: Applies accent color shades for backgrounds (light to dark).
bg-gray-50 to bg-gray-900: Applies grayscale shades for backgrounds (light to dark).
Typography
sk: activates fluid typography
tracking-wide: Increases letter spacing to 0.1em.
tracking-wider: Increases letter spacing to 0.15em.
tracking-tight: Reduces letter spacing to -0.02em.
text-left: Aligns text to the left.
text-center: Centers text.
text-right: Aligns text to the right.
text-justify: Justifies text.
Typography
sk: activates fluid typography
tracking-wide: Increases letter spacing to 0.1em.
tracking-wider: Increases letter spacing to 0.15em.
tracking-tight: Reduces letter spacing to -0.02em.
text-left: Aligns text to the left.
text-center: Centers text.
text-right: Aligns text to the right.
text-justify: Justifies text.