Typography

Documentation for the Stack typography API

Integration

• Once Stack is in your node modules folder, put this in the styling file that you've made for your project:

@use '~@growstocks/stack/Core/Typography';

@include Typography.config(
    ...
);

API

Basic Typography API

SCSS

Parameter	Effect
$global-font	STRING - Sets the font for all typography-related elements.
$title-font	STRING - Sets the font for title typography-related elements (e.g. <h1>, <h2>, <h3>). (Default value is $global-font)
$subtitle-font	STRING - Sets the font for subtitle typography-related elements (e.g. <h4>, <h5>, <h6>). (Default value is $global-font)
$body-font	STRING - Sets the font for body related properties (<p> and beyond). (Default value is $global-font)
${target}-font-weight	INT - Sets the target's font-weight. Available targets are: title, subtitle, and body(Default values correspond: 700, 400, 400)
${target}-font-type	STRING - Sets the target's font-type. By default, the value is sans-serif, you can change this depending on the font-family set for that target.

Typography API Implementation Example

@use '~@growstocks/stack/Core/Typography';

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');

@include Typography.config(
    $global-font: 'Roboto Condensed'
);

Advanced Typography API

• Coming soon! :>