svelte-prose
Typography utilities for Svelte.
Inspired by the U.S. Web Design System Prose component, svelte-prose
is a collection of components for long-form typography.
Install
yarn add -D svelte-prose
Usage
Some text content.
Headings
A Heading component (T.H1
, T.H2
, T.H3
, T.H4
, T.H5
, T.H6
) automatically creates an id from the text prop.
<!-- <h1 id="heading-level-1">Heading level 1</h1> -->
Table of Contents
The Prose
component creates a two-tiered table of contents from headings.
Hide the default ToC to render your own:
{#each toc as { id, text, children }} {text} {#each children as child} {child.text} {/each} {/each} Some text content.
API
Prose
Property name | Value |
---|---|
hideToc | boolean (default: false ) |
T.H{1-6}
Property name | Value |
---|---|
text | string (default: undefined ) |
Forwarded events
- on:click
- on:mouseover
- on:mouseenter
- on:mouseout