Type: Function

How to get fontStack?


import { fontStack } from 'fds/system';

A styling mixin which sets the "font-family" based on the specified name.


  1. name


    Type: String

    The name of the font stack to render the textual content of the component in. This will set the "font-family" CSS property based on a predefined set of values. Each font stack represents a certain use case in which it should be implemented, which is described below.

    Can be one of:

    • content: a serif font, should be used for articles and longer (regular) content.

    • interface: a sans-serif font, should be used for labels in components and other interface elements.

    • monospace: a fixed-width font, should be used for code (examples).


Type: String

A style rule resulting in a generated class name on the element.

Generally created using fds/system/applyCss and/or any styling utility provided by FDS.