diff --git a/assets/scss/_alerts.scss b/assets/scss/_alerts.scss index d292e636be..611affd833 100644 --- a/assets/scss/_alerts.scss +++ b/assets/scss/_alerts.scss @@ -1,4 +1,4 @@ -// Style alert boxes. +// Bootstrap alert style adjustments: .alert { font-weight: $font-weight-medium; @@ -22,9 +22,19 @@ } } -// The following is a placeholder class: +// ------------------------------ +// Docsy alert styles +// ------------------------------ + +// Placeholder class(es): +// .td-alert {} +// .td-alert--md {} // .td-alert-body {} +.td-alert-heading { + @extend .h4; +} + // Styles for GFM blockquote-alert types .alert-caution { @extend .alert-warning; diff --git a/docsy.dev/content/en/docs/content/lookandfeel.md b/docsy.dev/content/en/docs/content/lookandfeel.md index 6acfe08fae..bc0b75e5c2 100644 --- a/docsy.dev/content/en/docs/content/lookandfeel.md +++ b/docsy.dev/content/en/docs/content/lookandfeel.md @@ -587,11 +587,11 @@ To change the styling of an alert of type `abc`, override the CSS class } ``` -For example, to hide alert titles, use: +For example, to make alert headings `h3` (the default is `h4`), use: ```scss -.td-alert-body .alert-heading { - display: none; +.td-alert-heading { + @extend .h3; } ``` diff --git a/docsy.dev/content/en/tests/index.md b/docsy.dev/content/en/tests/index.md index b255cbe36c..3da1792c1f 100644 --- a/docsy.dev/content/en/tests/index.md +++ b/docsy.dev/content/en/tests/index.md @@ -5,10 +5,13 @@ type: docs description: Tests of Docsy features params: hide_feedback: true +cSpell:ignore: thumbsup --- ## Alerts +### Shortcode alerts + {{% alert title="Primary alert heading" color="primary" %}} A simple primary alert. {{% /alert %}} @@ -40,3 +43,51 @@ A simple light alert. {{% alert title="Dark alert heading" color="dark" %}} A simple dark alert. {{% /alert %}} + +{{% alert %}} A _nota bene_ alert. {{% /alert %}} + +{{% alert title="Centered note" color="primary text-center" %}} +Illustrating use of custom classes via the `color` parameter. +{{% /alert %}} + +### Blockquote alerts + +> [!NOTE] Primary alert heading +> +> A simple primary alert. + +> [!SECONDARY] Secondary alert heading +> +> A simple secondary alert. + +> [!TIP] Success alert heading +> +> A simple success alert. + +> [!DANGER] Danger alert heading +> +> A simple danger alert. + +> [!WARNING] Warning alert heading +> +> A simple warning alert. + +> [!INFO] Info alert heading +> +> A simple info alert. + +> [!LIGHT] Light alert heading +> +> A simple light alert. + +> [!DARK] Dark alert heading +> +> A simple dark alert. + +> [!NB] A _nota bene_ alert. + + +> [!PRIMARY] Centered note +> +> Illustrating the use of element attributes. +{.text-center #alert-id data-debug="testing"} diff --git a/layouts/_markup/render-blockquote-alert.html b/layouts/_markup/render-blockquote-alert.html index a9011d1ddc..cf34e07936 100644 --- a/layouts/_markup/render-blockquote-alert.html +++ b/layouts/_markup/render-blockquote-alert.html @@ -14,9 +14,19 @@ {{ $title = "" -}} {{ end -}} -