54 lines
1.1 KiB
Text
54 lines
1.1 KiB
Text
import { Meta } from '@storybook/addon-docs';
|
|
import { parameters } from '$docs/utils/docsPage.js';
|
|
|
|
<Meta title="SCSS/Fonts" parameters={{ ...parameters }} />
|
|
|
|
|
|
|
|
# Fonts
|
|
|
|
There are several ways to specify font styles.
|
|
|
|
## Classes
|
|
|
|
```svelte
|
|
<p>
|
|
<span class="font-serif">Lorem</span>
|
|
<span class="font-sans">ipsum</span>
|
|
<span class="font-mono">dolor</span>
|
|
</p>
|
|
```
|
|
|
|
## Variables
|
|
|
|
```svelte
|
|
<style lang="scss">
|
|
// Import SCSS variables
|
|
@import '@reuters-graphics/graphics-components/dist/scss/variables';
|
|
|
|
p {
|
|
// Use one...
|
|
font-family: $font-family-serif;
|
|
font-family: $font-family-sans-serif;
|
|
font-family: $font-family-display;
|
|
font-family: $font-family-monospace;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
## Mixins
|
|
|
|
```svelte
|
|
<style lang="scss">
|
|
// Import SCSS mixins
|
|
@import '@reuters-graphics/graphics-components/dist/scss/mixins';
|
|
|
|
p {
|
|
// Use one...
|
|
@include font-serif;
|
|
@include font-sans;
|
|
@include font-display;
|
|
@include font-monospace;
|
|
}
|
|
</style>
|
|
```
|