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.

Overview

↓

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 nisi ut.

Resize

<Callout title="Callout Title">
  <p>
    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.
  </p>
</Callout>

<div class="b--callout l--stack u--cbox" style="--keycolor:var(--gray)">
  <div class="b--callout_title l--flex">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1.25em" height="1.25em" 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>
    <span>Callout Title</span>
  </div>
  <div class="b--callout_body l--flow -flow:s">
    <p>...Contents...</p>
  </div>
</div>

Styles

The base styles for Callout are defined in the following CSS.

_style.css

@layer lism-block {
  /* Note: l--stack と u--cbox との併用を前提としています. */
  .b--callout {
    --bds: solid;
    --bdw: 3px;
    --bdc: var(--keycolor); /* u--cbox 非併用時のフォールバック */

    gap: var(--s10);
    padding: var(--s20);
    border-inline-start: var(--bdw) var(--bds) var(--bdc);

    /* u--cbox のボーダー色ミックス率を 100% にして、純粋な keycolor をボーダーに使う */
    --cbox-bdPct: 100%;
  }

  .b--callout_title {
    align-items: center;
    gap: var(--s10);
    color: var(--keycolor);
    font-weight: var(--fw--bold);
  }
}

The full source code is available on GitHub.

Usage

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

Import

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

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

<link href="https://cdn.jsdelivr.net/npm/@lism-css/ui@0.30.0/dist/style.css" rel="stylesheet" />

Props

Prop	Description
`keycolor`	Specifies the key color.
`icon`	Specifies the icon to pass to the `Icon` component. Pass an icon component or an SVG string. Default icons are bundled with `@lism-css/ui`.
`type`	Specifies a preset value combining `keycolor` and `icon`. Default: `"note"`
`title`	Specifies the title text.
`flow`	Passed to the `flow` prop of the `Flow` element that wraps the content.

Examples

Available Types

↓

Specifying type

Callout: type="info"

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: 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 title='Callout: type="info"' type="info">...</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>
<Callout title='Callout: type="note"' type="note">...</Callout>

<div class="l--stack -g:30">
  <div class="b--callout l--stack u--cbox" style="--keycolor:var(--blue)">
    <div class="b--callout_title l--flex">
      <svg class="a--icon"...>...</svg>
      <span>Callout: type="info"</span>
    </div>
    <div class="b--callout_body l--flow -flow:s">...Contents...</div>
  </div>
  <!-- type="alert" → --keycolor:var(--red) -->
  <!-- type="warning" → --keycolor:var(--yellow) -->
  <!-- type="point" → --keycolor:var(--orange) -->
  <!-- type="check" → --keycolor:var(--green) -->
  <!-- type="help" → --keycolor:var(--purple) -->
  <!-- type="note" → --keycolor:var(--gray) -->
</div>

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.

import { ArrowRightIcon } from '@lism-css/icons/react';

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

<div class="b--callout l--stack u--cbox" style="--keycolor:var(--pink)">
  <div class="b--callout_title l--flex">
    <svg class="a--icon"...>...</svg>
    <span>Heading text...</span>
  </div>
  <div class="b--callout_body l--flow -flow:s">
    <p>...Contents...</p>
  </div>
</div>

The icon is only shown when a title is set.

Without a `title`

When title is omitted, the title row (b--callout_title) is not rendered, leaving a simple body-only display.

↓

Without title

Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.

<Callout type="info">
  <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</p>
</Callout>

<div class="b--callout l--stack u--cbox" style="--keycolor:var(--blue)">
  <div class="b--callout_body l--flow -flow:s">
    <p>Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut.</p>
  </div>
</div>

Without @lism-css/ui

This example builds the same UI using Lism primitives and @lism-css/icons 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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

Resize

import { NoteIcon } from '@lism-css/icons/react';

<Stack util="cbox" keycolor="blue" p="20" g="10" bdc="keycolor" bd-s bdw="3px" bdrs="10">
  <Flex c="keycolor" fw="bold" ai="center" g="10">
    <Center>
      <Icon icon={NoteIcon} size="1.25em" />
    </Center>
    <span>Callout</span>
  </Flex>
  <Lism>
    <p>
      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.
    </p>
  </Lism>
</Stack>

<div class="l--stack u--cbox -p:20 -g:10 -bdc:keycolor -bd-s -bdrs:10" style="--keycolor: var(--blue); --bdw: 3px">
  <div class="l--flex -c:keycolor -fw:bold -ai:center -g:10">
    <div class="l--center">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="a--icon"
        viewBox="0 0 256 256"
        width="1.25em"
        height="1.25em"
        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. 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.
    </p>
  </div>
</div>