Lism CSS
Docs
検索

Callout

記事の中で、重要なポイントを示すためのコンポーネントです。

Overview

↓
Preview
Calloutタイトル

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

リサイズ 
<Callout title="Calloutタイトル">
  <p>
    ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。
  </p>
</Callout>

Styles

Callout のベーススタイルは、以下の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);
  }
}

ソースコード全体は GitHub で公開しています。

How to use

@lism-css/ui パッケージでCalloutとして提供しています。

Import

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

Props

プロパティ 説明
keycolor キーカラーを指定します。
icon Iconコンポーネントに渡すアイコンを指定できます。アイコンコンポーネントやSVG文字列を渡せます。既定のアイコンは@lism-css/uiに同梱されています。
type keycolorとiconの組み合わせのプリセット値を指定できます。初期値:"note"
title タイトルテキストを指定します。
flow コンテンツを囲むFlow要素のflowプロパティに渡されます

Examples

type一覧

↓
typeの指定
Callout: type="info"

ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。

Callout: type="alert"

ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。

Callout: type="warning"

ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。

Callout: type="point"

ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。

Callout: type="check"

ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。

Callout: type="help"

ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。

Callout: type="note"

ロレム・イプサムの座り雨、それは静かに歩く仮の言葉です。長いあいだ積み重ねられてきたLiberroyとFoogの取り組み」は、私たちに一定の示唆を与えてくれます。

<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>

icon、keycolorを指定

↓
icon、keycolorを指定
Heading text...

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

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


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

※ アイコンは、title の指定がある時のみ表示されます。

title を指定しない場合

title を省略すると、タイトル行（b--callout_title）は出力されず、本文だけのシンプルな表示になります。

↓
titleなし

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。

<Callout type="info">
  <p>ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</p>
</Callout>

Without @lism-css/ui

コンポーネントを作らずに、lism-css のコア要素だけで構築する例も紹介しておきます。

↓
Preview
Callout

ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

リサイズ 
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>
      ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。
    </p>
  </Lism>
</Stack>

© 2026 Lism CSS.