notecard

Information

Folder
src/components/elements/notecard

Files

Schema
Mocks
Template
// src/components/elements/notecard/notecard.twig

{% set icons = {
	error: "error_circle_filled",
	info: "info",
	note: "note",
	success: "check_circle_filled",
	warning: "warning_triangle",
} %}

<p aria-live="{{ aria_live|default("polite") }}" class="Notecard Notecard-{{ type }} {% if classes %} {{ classes|join(" ") }}{% endif %} {% if hidden %} visually-hidden {%- endif -%}">
  {% include "@elements/icon/icon.twig" with {
		classes: ["Notecard-icon"],
		name: icons[type],
	} only %}

	{{ text }}
</p>

Variants

Info
Open

Info mock data

Raw
Resolved
Note
Open

Note mock data

Raw
Resolved
Success
Open

Success mock data

Raw
Resolved
Warning
Open

Warning mock data

Raw
Resolved
Error
Open

Error mock data

Raw
Resolved