Callout

This page is currently under construction

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

A component for highlighting important points within an article.

↓

Preview

Callout Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Resize

<Callout title="Callout Title">
  <p>Lorem ipsum dolor sit amet...</p>
</Callout>

<div class="c--callout l--stack set--var:bxsh u--cbox -p:20 -g:10 -bd-x-s -bxsh:10" style="--keycolor:var(--blue);--bdc:var(--keycolor);--bdw: 3px">
  <div class="c--callout_head l--flex -c -fw:bold -ai:center -g:10" style="--c:var(--keycolor)">
    <div class="c--callout_icon l--center -fz:xl">
      <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="M229.66,58.34l-32-32a8,8,0,0,0-11.32,0l-96,96A8,8,0,0,0,88,128v32a8,8,0,0,0,8,8h32a8,8,0,0,0,5.66-2.34l96-96A8,8,0,0,0,229.66,58.34ZM124.69,152H104V131.31l64-64L188.69,88ZM200,76.69,179.31,56,192,43.31,212.69,64ZM224,120v88a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32h88a8,8,0,0,1,0,16H48V208H208V120a8,8,0,0,1,16,0Z"></path>
      </svg>
    </div>
    <span class="c--callout_title">Callout Title</span>
  </div>
  <div class="c--callout_body l--flow -flow:s">
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</div>

Usage

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

Import

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

Props

Property	Description
`keycolor`	Specifies the display color.
`icon`	Specifies the icon.
`type`	Specifies a preset value combining `keycolor` and `icon`. Default: `"note"`
`title`	Specifies the title text.
`flow`	Passed to `_body`.

Source Code

The source code is available on GitHub.

Examples

Available types

↓

Specifying type

Callout: type="note"

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

Callout: type="alert"

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

Callout: type="warning"

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

Callout: type="point"

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

Callout: type="check"

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

Callout: type="help"

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

<Callout title='Callout: type="note"' type="note">
  <DummyText length="codes" lang="en"/>
</Callout>
<Callout title='Callout: type="alert"' type="alert">...</Callout>
<Callout title='Callout: type="warning"' type="warning">...</Callout>
<Callout title='Callout: type="point"' type="point">...</Callout>
<Callout title='Callout: type="check"' type="check">...</Callout>
<Callout title='Callout: type="help"' type="help">...</Callout>

Specifying `icon` and `keycolor`

↓

Specifying icon and keycolor

Heading text...

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

<Callout title="Heading text..." icon="cart" keycolor="pink">
  <DummyText lang="en" />
</Callout>

The icon is only shown when a title is set.

Without @lism-css/ui

An example of building the component using only lism-css core elements, without a dedicated component.

↓

Preview

Callout

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

Resize

<Stack util="cbox" keycolor="blue" p="20" g="10" bdc="keycolor" bd-x-s bdw="3px" bxsh="10" bdrs="10">
  <Flex c="keycolor" fw="bold" ai="center" g="10">
    <Center className="c--note_icon" fz="xl">
      <Icon icon="note" />
    </Center>
    <span>Callout</span>
  </Flex>
  <Lism>
    <p>Lorem ipsum dolor sit amet...</p>
  </Lism>
</Stack>

<div class="l--stack u--cbox -p:20 -g:10 -bd-x-s -bxsh:10" style="--keycolor: var(--blue); --bdc: var(--keycolor); --bdw: 3px">
  <div class="l--flex -c -fw:bold -ai:center -g:10" style="--c: var(--keycolor)">
    <div class="c--note_icon l--center -fz:xl">
      <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="M229.66,58.34l-32-32a8,8,0,0,0-11.32,0l-96,96A8,8,0,0,0,88,128v32a8,8,0,0,0,8,8h32a8,8,0,0,0,5.66-2.34l96-96A8,8,0,0,0,229.66,58.34ZM124.69,152H104V131.31l64-64L188.69,88ZM200,76.69,179.31,56,192,43.31,212.69,64ZM224,120v88a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32h88a8,8,0,0,1,0,16H48V208H208V120a8,8,0,0,1,16,0Z"
        ></path>
      </svg>
    </div>
    <span>Callout</span>
  </div>
  <div>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</div>