Demos

The different variants of demo containers we have in the docs.

Standard demo

"Standard" refers to when no background is explicitly defined. So, it renders the "outlined" background variant.

This is an info alert — check it out!

This is a success alert — check it out!

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

Press Enter to start editing

This is an info alert — check it out!

This is a success alert — check it out!

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

Press Enter to start editing

This is an info alert — check it out!

This is a success alert — check it out!

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

Press Enter to start editing

This is an info alert — check it out!

This is a success alert — check it out!

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

Press Enter to start editing

This is an info alert — check it out!

This is a success alert — check it out!

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">This is a success alert — check it out!</Alert>

Press Enter to start editing

This is an info alert — check it out!

This is a success alert — check it out!

This is an info alert — check it out!

This is a success alert — check it out!

This is an info alert — check it out!

This is a success alert — check it out!