Wave & grid paper
Wavy section dividers and grid-paper backgrounds. Give a wave the colour of the section it leads into (fill), and flip it at the top edge of a section.
Next section
<hc-grid-paper size="32" style="padding: 48px 32px 0">
<hc-heading level="3" size="xl">Grid paper, 32px</hc-heading>
</hc-grid-paper>
<div style="background: var(--hc-surface)">
<hc-wave fill="var(--hc-ink)" line></hc-wave>
<div style="background: var(--hc-ink); color: var(--hc-cream); padding: 32px">Next section</div>
</div>API
Attributes
| Name | Type | Default | Description |
|---|---|---|---|
hc-wave fill | CSS color | var(--hc-background) | Fill color |
hc-wave flip | boolean | Point downward | |
hc-wave line | boolean | Stroke the crest | |
hc-grid-paper size | number | 50 | Cell size in px |
CSS custom properties
| Name | Description |
|---|---|
--hc-grid-size, --hc-grid-color | Grid paper cell size and line color |