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

docs: stylize "Default" subheadings

Browse source
This commit is contained in:
Eric Liu 2025-05-03 11:21:42 -07:00
commit 0e04149219
9 changed files with 18 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/src/pages/components/AspectRatio.svx
View file

@ -7,7 +7,9 @@ The `AspectRatio` component maintains consistent proportions for content across
Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`. Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
## Default (2x1) ## Default
Display a 2:1 aspect ratio container by default.
<AspectRatio> <AspectRatio>
2x1 2x1

4
docs/src/pages/components/CodeSnippet.svx
View file

@ -33,9 +33,9 @@ This component uses the native, asynchronous [Clipboard API](https://developer.m
You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality). You can override the default copy functionality with your own implementation. See [Overriding copy functionality](#overriding-copy-functionality).
## Default (single-line) ## Default
Display a single line of code with a copy button. Display a single-line code snippet by default.
<CodeSnippet code="npm i carbon-components-svelte" /> <CodeSnippet code="npm i carbon-components-svelte" />

4
docs/src/pages/components/InlineNotification.svx
View file

@ -12,9 +12,9 @@ The `InlineNotification` component displays contextual messages inline with cont
See [detailed usage](https://carbondesignsystem.com/components/notification/usage). See [detailed usage](https://carbondesignsystem.com/components/notification/usage).
See also: [ToastNotification](ToastNotification) See also: [ToastNotification](ToastNotification)
## Default (error) ## Default
Display a basic error notification with title and subtitle. Display a basic error notification with title and subtitle by default.
<InlineNotification title="Error:" subtitle="An internal server error occurred." /> <InlineNotification title="Error:" subtitle="An internal server error occurred." />

2
docs/src/pages/components/Loading.svx
View file

@ -9,7 +9,7 @@ components: ["Loading"]
The `Loading` component provides a full-screen or inline loading indicator. It's ideal for showing progress during page loads or data fetching operations. The `Loading` component provides a full-screen or inline loading indicator. It's ideal for showing progress during page loads or data fetching operations.
## Default (with overlay) ## Default
Display a loading indicator with a semi-transparent overlay that covers the entire viewport. Display a loading indicator with a semi-transparent overlay that covers the entire viewport.

4
docs/src/pages/components/Modal.svx
View file

@ -4,7 +4,9 @@
The `Modal` component provides a focused dialog for user interactions, confirmations, or data entry. It supports various sizes, states, and customization options to create accessible and user-friendly modal experiences. The `Modal` component provides a focused dialog for user interactions, confirmations, or data entry. It supports various sizes, states, and customization options to create accessible and user-friendly modal experiences.
## Default (transactional) ## Default
Display a modal dialog with a header, content area, and footer by default.
Create a basic modal dialog with primary and secondary actions. This variant is ideal for confirming user actions or gathering input. Create a basic modal dialog with primary and secondary actions. This variant is ideal for confirming user actions or gathering input.

2
docs/src/pages/components/ProgressIndicator.svx
View file

@ -9,7 +9,7 @@ components: ["ProgressIndicator", "ProgressStep", "ProgressIndicatorSkeleton"]
`ProgressIndicator` provides a visual representation of progress through a sequence of steps. It supports horizontal and vertical layouts, step completion states, and interactive navigation. `ProgressIndicator` provides a visual representation of progress through a sequence of steps. It supports horizontal and vertical layouts, step completion states, and interactive navigation.
## Default (horizontal) ## Default
Create a horizontal progress indicator with four steps. Create a horizontal progress indicator with four steps.

4
docs/src/pages/components/StructuredList.svx
View file

@ -10,9 +10,9 @@ components: ["StructuredList", "StructuredListSkeleton", "StructuredListBody", "
`StructuredList` provides a semantic way to display tabular data with support for selection, keyboard navigation, and various layout options. `StructuredList` provides a semantic way to display tabular data with support for selection, keyboard navigation, and various layout options.
## Default (read-only) ## Default
Create a basic structured list with headers and rows. Display a basic structured list with headers and rows by default.
<StructuredList> <StructuredList>
<StructuredListHead> <StructuredListHead>

4
docs/src/pages/components/ToastNotification.svx
View file

@ -12,9 +12,9 @@ components: ["ToastNotification"]
See [detailed usage](https://carbondesignsystem.com/components/notification/usage). See [detailed usage](https://carbondesignsystem.com/components/notification/usage).
See also: [InlineNotification](InlineNotification) See also: [InlineNotification](InlineNotification)
## Default (error) ## Default
Display a basic error notification with title, subtitle, and timestamp. Display a basic error notification with title, subtitle, and timestamp by default.
<ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" /> <ToastNotification title="Error" subtitle="An internal server error occurred." caption="{new Date().toLocaleString()}" />

4
docs/src/pages/components/Toggle.svx
View file

@ -9,9 +9,9 @@ components: ["Toggle", "ToggleSkeleton"]
`Toggle` provides a switch-like control that allows users to turn options on or off. It supports custom labels, different sizes, and various states to match your application's needs. `Toggle` provides a switch-like control that allows users to turn options on or off. It supports custom labels, different sizes, and various states to match your application's needs.
## Default (untoggled) ## Default
Display a basic toggle with a label. Display a basic toggle in its untoggled state by default.
<Toggle labelText="Push notifications" /> <Toggle labelText="Push notifications" />