docs: stylize "Default" subheadings

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

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"`.
## Default (2x1)
## Default
Display a 2:1 aspect ratio container by default.
<AspectRatio>
2x1

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).
## 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" />

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 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." />

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.
## Default (with overlay)
## Default
Display a loading indicator with a semi-transparent overlay that covers the entire viewport.

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.
## 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.

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.
## Default (horizontal)
## Default
Create a horizontal progress indicator with four steps.

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.
## 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>
<StructuredListHead>

View file

@ -12,9 +12,9 @@ components: ["ToastNotification"]
See [detailed usage](https://carbondesignsystem.com/components/notification/usage).
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()}" />

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.
## Default (untoggled)
## Default
Display a basic toggle with a label.
Display a basic toggle in its untoggled state by default.
<Toggle labelText="Push notifications" />