Skip to content

update inline-alert #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
melissag-ensemble merged 1 commit into from
Dec 5, 2025
Merged

update inline-alert #7

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 51 additions & 13 deletions src/pages/blocks/inline-alert/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,17 @@ Your alert message here.
## Parameters

- **slots**:
- `"text"` - Simple text
- `"header, text1, text2"` - With header and sections

- **variant**: Alert type (default: `info`)
- `"info"` - Blue
- `"help"` - Purple
- `"warning"` - Orange
- `"error"` - Red
- `"success"` - Green
- `"neutral"` - Gray
- `heading` (optional) - Use plain markdown text. You can only use one title per alert block.
- `"text"` (required). Use plain markdown text.
- `text1, text2, text[n]` - You can use additional text slots to display multiple paragraphs.

- **variant**: determines the icon and border color of the alert
- `info` (default) — use to add helpful information.
- `"help"` - use to add brief steps from or links to other help topics.
- `"error"` - use to highlight errors that may result from an action.
- `"success"` - use to highlight success messages that may be displayed after an action.
- `"warning"` - use to focus attention on a potential problem that could occur.
- `"neutral"` - use as an all-purpose callout that displays a black border and no icon.

## Examples

Expand All @@ -37,11 +38,11 @@ Your alert message here.

This is an info alert.

### Warning
### Help

<InlineAlert slots="text" variant="warning"/>
<InlineAlert slots="text" variant="help"/>

This is a warning alert.
This is an help alert.

### Error

Expand All @@ -54,3 +55,40 @@ This is an error alert.
<InlineAlert slots="text" variant="success"/>

This is a success alert.

### Warning

<InlineAlert slots="text" variant="warning"/>

This is a warning alert.

### Neutral

<InlineAlert slots="text" variant="neutral"/>

This is a neutral alert.

### Richer Inline Alert

<InlineAlert variant="help" slots="heading, text1, text2, text3, text4" />

Alternative steps:

**Step 1:** This is faux step text for the `text1` slot.
This is faux step text for the `text1` slot.
This is faux step text for the `text1` slot.
This is faux step text for the `text1` slot.
This is faux step text for the `text1` slot.

**Step 2:** This is faux step text for the `text2` slot.
This is faux step text for the `text2` slot.
This is faux step text for the `text2` slot.

**Step 3:** This is faux step text for the `text3` slot.

**Step 4:** This is faux step text for the `text4` slot.
This is faux step text for the `text3` slot.