Importing typography will add the font-faces and prebuilt CSS classes to the document. See typography.js for the class names (ex. .d2l-typography). Importing CSS templates from styles.js will enable the use of prebuilt typography classes within component templates.
"Standard Body" can be used to apply base font properties, but will also respond to viewport width changes.
Compact body is a smaller version of the standard body style, for use in areas that prefer to be conservative with the amount of real estate used by text. It is not recommended for blocks of readable text, particularly in paragraph form. Rather, it is best employed for brief informative text or calls to action.
Never used by itself; always in support of another piece of content on the page. Used for inline assistive text in forms, and for specifying metadata or properties of an existing piece of content.
Used for labels. Its font size/line spacing is relative to the root font and responds to viewport width changes.
There are four available heading styles. These are typically be applied to the h1, h2, h3 and h4 HTML elements, though it's not a requirement.
Import typography.js, add the d2l-typography class to the body, and add other classes as needed. Note: typography.js only needs to be imported once. Similarly, the d2l-typography class should only be added once, typically to the body.
<head>
<script type="module">
import '@brightspace-ui/core/components/typography/typography.js';
</script>
</head>
<body class="d2l-typography">
<h1 class="d2l-heading-2"> ... </h1>
</body>Import the desired CSS templates from styles.js, include them in the static styles of the component, and use the classes within rendering templates.
import { heading2Styles } from '@brightspace-ui/core/components/typography/styles.js';
class MyComponent extends LitElement {
static get styles() {
return [ heading2Styles, css`
:host {
display: inline-block;
}
` ];
}
render() {
return html `<h1 class="d2l-heading-2"> ... </h1>`;
}
}Looking for an enhancement not listed here? Create a GitHub issue!