Alert

This page is currently under construction

Lism UI (@lism-css/ui) is still in preparation.

A component for displaying short messages with visual emphasis.

↓

Preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Resize

<Alert>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Alert>

<div class="c--alert l--flex set--var:bxsh u--cbox -ai:center -p:15 -g:15 -bd -bdrs:10 -bxsh:10" style="--keycolor:var(--red)">
  <div class="l--center -c -fz:xl -fxsh:0" style="--c:var(--keycolor)">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 256 256"
      width="1em"
      height="1em"
      fill="currentColor"
      focusable="false"
      class="a--icon"
      aria-hidden="true"
    >
      <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z"></path>
    </svg>
  </div>
  <div class="l--flow -flow:s">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

Usage

Provided as Alert from the @lism-css/ui package.

Import

import { Alert } from '@lism-css/ui/react';

Props

Property	Description
`type`	Specifies a keyword that sets a combination of `keycolor` and `icon`. Default: `"alert"`
`icon`	Specifies the icon to pass to the `Icon` component.
`keycolor`	Specifies the key color.
`flow`	Passed to the div element wrapping the content.
`layout`	Switches the layout primitive. Default: `"flex"`

Source Code

The source code is available on GitHub.

Examples

Layout variants

↓

Preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Resize

<Alert layout="withSide">
  <p>Lorem ipsum dolor sit amet...</p>
</Alert>

Available types

↓

Specifying type

Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor. Non facere Laudantium ex eos doloribus aut dolore nisi provident.

Resize

<Alert type="alert">...</Alert>
<Alert type="point">...</Alert>
<Alert type="warning">...</Alert>
<Alert type="check">...</Alert>
<Alert type="info">...</Alert>
<Alert type="help">...</Alert>

Specifying a custom color and icon

↓

Specifying a custom color and icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

<Alert icon="good" keycolor="pink">
  <p>Lorem ipsum dolor sit amet...</p>
</Alert>

Without @lism-css/ui

An example of building an Alert using only lism-css, without @lism-css/ui.

↓

Preview

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Resize

<WithSide set="var:bxsh" util="cbox" keycolor="red" ai="center" p="15" g="15" bd bdrs="10" bxsh="10">
  <Center isSide c="keycolor" fz="xl">
    <Icon icon="alert" />
  </Center>
  <Flow flow="s">
    <p>Lorem ipsum dolor sit amet...</p>
  </Flow>
</WithSide>

<div class="l--withSide set--var:bxsh u--cbox -ai:center -p:15 -g:15 -bd -bdrs:10 -bxsh:10" style="--keycolor: var(--red)">
  <div class="l--center is--side -c -fz:xl" style="--c: var(--keycolor)">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="a--icon"
      viewBox="0 0 256 256"
      width="1em"
      height="1em"
      fill="currentColor"
      focusable="false"
      aria-hidden="true"
    >
      <path
        d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z"
      ></path>
    </svg>
  </div>
  <div class="l--flow -flow:s">
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</div>