-
- Info toast with an undo button.
-
-
-
-
+
+
{% icon "Info" %}
+ Toast notice message with an undo button
+
+
+
@@ -242,64 +233,102 @@
- {% header "h3", "Filled" %}
-
Default style used to separate notices from the main content
+ {% header "h3", "Base" %}
+
Default notice variations
{% highlight html %}
-
…
-
…
+
+ @Svg.Help
+ …
+
+
+ @Svg.Info
+ …
+
-
…
-
…
+
+ @Svg.Alert
+ …
+
+
+ @Svg.AlertFill
+ …
+
+
+ @Svg.Star
+ …
+
+
+ @Svg.Notification
+ …
+
{% endhighlight %}
- {% for variant in variants %}
- {% assign variantCapitalized = variant | capitalize %}
- {% assign variantClass = " s-notice__" | append: variant %}
+ {% for variant in notices.base %}
+ {% assign variantClass = " s-notice__" | append: variant.type %}
{% if variant == "default" %}
{% assign variantClass = "" %}
{% endif %}
-
- {{variantCapitalized}} filled message style
- and some code notice. Link
-
+
{% icon variant.icon %}
+ {{variant.type | capitalize}} filled message style
+
and some code notice.
Link
{% endfor %}
- {% header "h3", "Filled important" %}
+ {% header "h3", "Important" %}
Used sparingly for when an important notice needs to be noticed
{% highlight html %}
-
…
-
…
+
+ @Svg.Help
+ …
+
+
+ @Svg.Info
+ …
+
-
…
-
…
+
+ @Svg.Alert
+ …
+
+
+ @Svg.AlertFill
+ …
+
+
+ @Svg.Star
+ …
+
+
+ @Svg.Notification
+ …
+
{% endhighlight %}
- {% for variant in variants %}
- {% assign variantCapitalized = variant | capitalize %}
- {% assign variantClass = " s-notice__" | append: variant %}
- {% if variant == "default" %}
+ {% for variant in notices.base %}
+ {% assign variantClass = " s-notice__" | append: variant.type %}
+ {% if variant.type == "default" %}
{% assign variantClass = "" %}
{% endif %}
-
- {{variantCapitalized}} important message style
- and some code notice. Link
-
+
{% icon variant.icon %}
+ {{variant.type | capitalize}} filled message style
+
and some code notice.
Link
{% endfor %}
@@ -321,16 +350,14 @@
-
- Notice with
- .s-anchors .s-anchors__inherit .s-anchors__underlined and custom link style
-
+
{% icon "Info" %}
+ Notice with
+
.s-anchors .s-anchors__inherit .s-anchors__underlined and
custom link style
@@ -373,48 +400,12 @@
- {% header "h3", "Inline" %}
-
Default behavior for notices that are inserted within the content area
-
-{% highlight html %}
-
…
-{% endhighlight %}
-
-
-
-
Inline notice message style
-
-
-
-
-
- {% header "h3", "With an Icon" %}
-
Notices are often accompanied by an icon.
-
-{% highlight html %}
-
-
- @Svg.Alert
-
-
- …
-
-
-{% endhighlight %}
-
-
-
- {% icon "Alert" %}
-
-
- This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
-
-
-
-
-
{% header "h3", "Toast" %}
-
Floating notices, but aligned to the top and center of the page and they disappear after a set time. Visibility is changed with animation by toggling between aria-hidden="true" and aria-hidden="false". When including buttons, you can apply .s-notice--btn to buttons to apply a toast-specific color.
+
+ Floating notices, but aligned to the top and center of the page and they disappear after a set time.
+ Visibility is changed with animation by toggling between aria-hidden="true" and aria-hidden="false".
+ When including a dismiss button the .s-notice--dismiss class should be applied to the button for toast-specific styling.
+
@@ -434,38 +425,31 @@
data-controller="s-toast"
data-s-toast-target="toast"
data-s-toast-return-element=".js-example-toast-open[data-target='#example-toast']">
-