Template:Callout: Difference between revisions

Revision as of 15:08, 9 July 2026

Callout Template

Creates a styled, accessible callout for documentation.

Usage

{{Callout
 | type=tip
 |
You'll know you've successfully logged into Drupal when you see '''My Sites''' and your username in the black menu bar.

{{Screenshot
 | DrupalMySites.png
 | 500px
 | Screenshot showing the My Sites menu.
 | The Drupal toolbar after a successful login.
}}
}}

Custom Title

{{Callout
 | type=important
 | title=Drupal Training
 |
'''You must complete Drupal training before being given editing access to any website.'''

If you have questions about user permissions, contact [mailto:web-update@swarthmore.edu web-update@swarthmore.edu].
}}

Types

tip (default)
note
important
warning
success

Parameters

type — Optional.
title — Optional.
Body — The first unnamed parameter. Supports wiki markup, templates, images, tables, lists, links, and other standard MediaWiki content.

@@ Line 1: / Line 1: @@
-<includeonly><div style="text-align:center; margin:1.5em auto;">
+<includeonly><div style="text-align:center; margin:1.5em 0;">
-<div role="note" aria-label="{{{title|{{#switch:{{lc:{{{type|tip}}}}}
+<div role="note" aria-label="{{{title|{{#switch:{{lc:{{{type|tip}}}}}|warning=Warning|important=Important|success=Success|note=Note|#default=Tip}}}}}" style="display:inline-block; width:auto; max-width:min(48em, 100%); box-sizing:border-box; text-align:left; padding:16px; border-radius:8px; border:1px solid {{#switch:{{lc:{{{type|tip}}}}}|warning=#d97706|important=#b45309|success=#15803d|note=#6b7280|#default=#c7d8f5}}; background:{{#switch:{{lc:{{{type|tip}}}}}|warning=#fff8e6|important=#fff7ed|success=#f0fdf4|note=#f9fafb|#default=#f8fbff}};">
- |warning=Warning
+<div style="font-weight:bold; font-size:1.1em; margin:0 0 .75em 0; color:{{#switch:{{lc:{{{type|tip}}}}}|warning=#7c3f00|important=#7c2d12|success=#14532d|note=#374151|#default=#1d4f91}};"><span>{{{title|{{#switch:{{lc:{{{type|tip}}}}}|warning=Warning|important=Important|success=Success|note=Note|#default=Tip}}}}}</span></div>
- |important=Important
+<div style="line-height:1.5;">{{{1|{{{content|}}}}}}</div>
- |success=Success
- |note=Note
- |#default=Tip
-}}}}}" style="
-display:inline-block;
-width:auto;
-max-width:48em;
-box-sizing:border-box;
-text-align:left;
-padding:16px;
-border-radius:8px;
-border:1px solid {{#switch:{{lc:{{{type|tip}}}}}
- |warning=#d97706
- |important=#b45309
- |success=#15803d
- |note=#6b7280
- |#default=#c7d8f5
-}};
-background:{{#switch:{{lc:{{{type|tip}}}}}
- |warning=#fff8e6
- |important=#fff7ed
- |success=#f0fdf4
- |note=#f9fafb
- |#default=#f8fbff
-}};
-">
-<div style="
-font-weight:bold;
-font-size:1.1em;
-margin:0 0 .75em 0;
-color:{{#switch:{{lc:{{{type|tip}}}}}
- |warning=#7c3f00
- |important=#7c2d12
- |success=#14532d
- |note=#374151
- |#default=#1d4f91
-}};
-">
-{{{title|{{#switch:{{lc:{{{type|tip}}}}}
- |warning=Warning
- |important=Important
- |success=Success
- |note=Note
- |#default=Tip
-}}}}}
-</div>
-<div style="line-height:1.5;">
-{{{1|{{{content|}}}}}}
-</div>
 </div>
 </div></includeonly>