callout | WEBデザイン Librarys

Inline
block
HTML
Light Color
Icon

default information success important warning error

This is an default message!

This is an information message!

This is an success message!

This is an important message!

This is an warning message!

This is an error message!

list 1
list 2

default light information light success light important light warning light error light

default information success important warning error original

使い方

+-.callout-+単体での使用も可能。
{display}の設定は無いのでインライン・ブロックどちらの要素にも使用可能。

内部要素はゴリゴリのHTMLでも可能。多分。

+-.ico-bef-+のクラス追加でアイコン表示可能。
デフォルト以外はクラス追加だけでも表示されるが、[data-ico]属性にマテリアルアイコンのコードを指定することで独自のアイコンに変更可能。
デフォルトステータスはアイコンを設定していないので[data-ico]で指定してください。

ステータスの種類
[無]	-	灰色
[inf]	information	青
[suc]	success	緑
[imp]	important	紫
[war]	warning	オレンジ
[err]	error	赤

CSS

.callout {
  padding: 8px 12px;
  border-radius: var(--radius-xm);
  border: 1px solid #90a4ae;
  background: #eceff1;
  color: var(--black-light);
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.callout.ico-bef {padding-left: 44px;}
.callout.ico-bef::before {
  width: 24px;
  height: 24px;
  line-height: 24px;
  position: absolute;
  top: 8px;
  left: 12px;
}
.callout.inf {
  border-color: var(--info-main);
  background: var(--info-bg);
  color: var(--info-contrast);
}
.callout.suc {
  border-color: var(--success-main);
  background: var(--success-bg);
  color: var(--success-contrast);
}
.callout.imp {
  border-color: var(--important-main);
  background: var(--important-bg);
  color: var(--important-contrast);
}
.callout.war {
  border-color: var(--warning-main);
  background: var(--warning-bg);
  color: var(--warning-contrast);
}
.callout.err {
  border-color: var(--error-main);
  background: var(--error-bg);
  color: var(--error-contrast);
}
.callout.light {border-color: #cfd8dc;}
.callout.light::after {
  content: '';
  width: 100%;
  height: 100%;
  background: rgb(255 255 255 / .5);
  border-radius: var(--radius-xm);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.callout.inf.light {border-color: #bbdefb;}
.callout.suc.light {border-color: #c8e6c9;}
.callout.imp.light {border-color: #e1bee7;}
.callout.war.light {border-color: #ffe0b2;}
.callout.err.light {border-color: #ffcdd2;}
.callout.inf.ico-bef::before {
  content: "info";
  color: var(--info-main);
}
.callout.suc.ico-bef::before {
  content: "check_circle";
  color: var(--success-main);
}
.callout.imp.ico-bef::before {
  content: "label_important";
  color: var(--important-main);
}
.callout.war.ico-bef::before {
  content: "warning";
  color: var(--warning-main);
}
.callout.err.ico-bef::before {
  content: "dangerous";
  color: var(--error-main);
}
.callout.ico-bef[data-ico]::before {content: attr(data-ico);}