Template:Callout: Difference between revisions

Latest revision as of 15:15, 10 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>
+<includeonly><templatestyles src="Template:Callout/styles.css" /><div class="callout-wrapper"><div class="callout callout--{{lc:{{{type|tip}}}}}" role="note" aria-label="{{{title|{{#switch:{{lc:{{{type|tip}}}}}|warning=Warning|important=Important|success=Success|note=Note|#default=Tip}}}}}"><div class="callout__title">{{{title|{{#switch:{{lc:{{{type|tip}}}}}|warning=Warning|important=Important|success=Success|note=Note|#default=Tip}}}}}</div><div class="callout__content">{{{content|{{{1|}}}}}}</div></div></div></includeonly>
-<div role="note" aria-label="{{{title|{{#switch:{{lc:{{{type|tip}}}}}
+<noinclude>
- |warning=Warning
- |important=Important
- |success=Success
- |note=Note
- |#default=Tip
-}}}}}" style="
-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
-}};
-border-radius:8px;
-padding:16px;
-margin:1.5em 0;
-">
-<div style="
-font-weight:bold;
-font-size:1.1em;
-margin-bottom:.5em;
-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="border-top:1px solid rgba(0,0,0,.15); padding-top:.75em; line-height:1.5;">
-{{{1|{{{content|}}}}}}
-</div>
-</div>
-</includeonly>
-<noinclude>
 == Callout Template ==
-Creates an accessible callout box for notes, tips, warnings, important messages, and success messages.
+Creates a styled, accessible callout for documentation.
-=== Preferred Usage ===
+=== Usage ===
-Use the first unnamed parameter for the body content:
 <pre>
@@ Line 67: / Line 12: @@
   | type=tip
   |
-You’ll know you’ve successfully logged into Drupal when you see '''My Sites''' and your name in the black menu bar.
+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
+  | Screenshot showing the My Sites menu.
   | The Drupal toolbar after a successful login.
 }}
@@ Line 78: / Line 23: @@
 </pre>
-=== Usage with Custom Title ===
+=== Custom Title ===
 <pre>
 {{Callout
   | type=important
-  | title=Before you continue
+  | title=Drupal Training
   |
-Never unpublish your homepage.
+'''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].
 }}
 </pre>
-=== Supported Types ===
+=== Types ===
-* <code>tip</code>
+* <code>tip</code> (default)
 * <code>note</code>
 * <code>important</code>
@@ Line 99: / Line 46: @@
 === Parameters ===
-# '''type''' — optional. Defaults to <code>tip</code>.
+# '''type''' — Optional.
-# '''title''' — optional. Overrides the default title.
+# '''title''' — Optional.
-# '''unnamed body content''' — required. May include text, links, lists, images, tables, and other templates.
+# '''Body''' — The first unnamed parameter. Supports wiki markup, templates, images, tables, lists, links, and other standard MediaWiki content.
-=== Legacy Usage ===
-The template also supports <code>content=</code>, but unnamed body content is preferred:
-<pre>
-{{Callout
- | type=note
- | content=Profile data comes from both Drupal and MySwarthmore.
-}}
-</pre>
 </noinclude>