Typography
How to use the typography system.
Usage
Styles
sass
@use "~@iraiser/biscuit-design-components/components/typography/styles";
HTML structure
html
<body class="bdc-typography">
<h1 class="bdc-typography--headline-1">Headline 1</h1>
</body>
Typeface
The default type face is "Proxima Nova".
"Proxima Nova" is not a free font family, you need to the Typekit CSS source link managed by
iRaiser: https://use.typekit.net/orc1toy.css. If you have any issue with the link, check with your project manager.
Scales
| Name | Description |
|---|---|
body | Set the "body" properties. |
body-2 | Set the "second body" properties. |
headline-1 | Set the "headline 1" properties. |
headline-2 | Set the "headline 2" properties. |
headline-3 | Set the "headline 3" properties. |
headline-4 | Set the "headline 4" properties. |
headline-5 | Set the "headline 5" properties. |
headline-6 | Set the "headline 6" properties. |
subtitle | Set the "subtitle" properties. |
caption | Set the "caption" properties. |
overline | Set the "overline" properties. |
button | Set the "button" properties. |
Theming
See the "Theming" section on theme documentation for more customization options.
Theming with CSS custom properties
Set custom styles on global...
sass
:root {
--bdc-typography-font-family: "Open Sans", sans-serif;
}
...or on a specific element:
sass
.foo-text-field {
--bdc-typography-font-family: "Open Sans", sans-serif;
}
Theming with Sass variables
Set global theme colors in your Sass file:
sass
@use "~@iraiser/biscuit-design-components/components/typography" with (
$base: (
font-family: "Open Sans", sans-serif,
)
$styles-headline-2: (
line-height: 1.5,
font-size: 20px
)
);
Style customization
The variable {style} in the documentation correspond with the list of scales, do not hesitate to check it
for more examples.
CSS classes
| CSS Class | Description |
|---|---|
bdc-typography | Set the font properties. |
bdc-typography--{style} | Set the selected style. |
CSS custom properties
| CSS Custom Property | Description |
|---|---|
--bdc-typography-font-family | Override the base font family in global. |
--bdc-typography-{style}-font-family | Override the selected style font family. |
Sass variables
| Variable | Description |
|---|---|
$base | Set the font properties. |
$styles-{style} | Set the selected style properties. |
Sass mixins
| Mixin | Description |
|---|---|
typography($style, $ellipsis) | Set the selected style on selector. |
ellipsis | Set ellipsis properties. |
Usage
sass
@use "~@iraiser/biscuit-design-components/components/typography";
.foo {
@include typography.typography(body);
}