mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-19 20:09:35 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(heading): add Heading and Section components (#1961)

Browse source
This commit is contained in:
Eric Liu 2024-04-21 14:27:26 -07:00 • committed by GitHub
commit 76210d68d4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 287 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

72
docs/src/pages/components/Heading.svx Normal file
View file

@ -0,0 +1,72 @@
---
components: ["Heading", "Section"]
---
<script>
import { Heading, Section } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
The `Heading` component automatically adjusts the level of the heading based on the nesting level of the `Section` component.
## Default
For example, the top-level `Heading` inside a `Section` will be rendered as a semantic `h1` element.
<Section>
<Heading>Heading 1</Heading>
</Section>
## Nested sections
Section headings are capped at `h6`.
<Section>
<Heading>Heading 1</Heading>
<Section>
<Heading>Heading 2</Heading>
<Section>
<Heading>Heading 3</Heading>
<Section>
<Heading>Heading 4</Heading>
<Section>
<Heading>Heading 5</Heading>
<Section>
<Heading>Heading 6</Heading>
<Section>
<Heading>Capped at Heading 6</Heading>
</Section>
</Section>
</Section>
</Section>
</Section>
</Section>
<Section>
<Heading>Heading 2</Heading>
</Section>
</Section>
## Custom level
To specify a custom start level, use the `level` prop.
<Section level={5}>
<Heading>Starts at Heading 5</Heading>
<Section>
<Heading>Heading 6</Heading>
<Section>
<Heading>Capped at Heading 6</Heading>
</Section>
</Section>
</Section>
## Custom section element
The `Section` component renders a `section` by default.
Use the `tag` prop to render a different element.
<Section tag="div">
<Heading>Heading 1</Heading>
</Section>