Template:Alert: Difference between revisions

Browse history interactively

← Older edit Newer edit →

Content deleted Content added

VisualWikitext

Inline

Revision as of 05:52, 2 May 2025

Examples:

openfox colors:

Source

{{Alert|content=a tailwind based skin|content bold=Lisa:|type=top border|bg-color=bg-light-purple|border-color=border-fox-purple|text-color=text-fox-purple|icon-type=fa-regular}}

Lisa:

a tailwind based skin

Traditional

Source

{{Alert
|type=traditional
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
}}

Result

This is an alert

Modern with Badge

Source

{{Alert
|type=modern
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|link=https://example.com
}}

Result

This isan alert

Left Accent Border

Source

{{Alert
|type=left border
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|link=https://example.com
}}

Result

This is

an alert

Titled

Source

{{Alert
|type=titled
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|link=https://example.com
}}

Result

This is

an alert

Solid

Source

{{Alert
|type=solid
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|link=https://example.com
}}

Result

This is an alert

Top Accent Border

Source

{{Alert
|type=top border
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|link=https://example.com
}}

Result

This is

an alert

Banner

Source

{{Alert
|type=banner
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|link=https://example.com
}}

Result

This is

an alert

Titled

Source

{{Alert
|type=Titled
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|link=https://example.com
}}

Result

Template for text alerts and banners

Template parameters[Edit template data]
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
Content	`content`	no description	Line	suggested
Bold content	`content bold`	no description	Line	suggested
type	`type`	no description Suggested values `traditional` `titled` `solid` `modern` `left border` `top border` `banner` Default traditional	String	suggested
Background color	`bg-color`	no description Suggested values `bg-light-azure` `bg-light-purple` `bg-light-magenta`	String	suggested
Border color	`border-color`	no description Suggested values `border-fox-purple` `border-fox-azure` `bg-fox-magenta`	String	suggested
Text color	`text-color`	no description Suggested values `text-fox-purple` `text-fox-azure` `text-fox-magenta`	String	optional
Icon	`icon`	Font Awesome icon name	String	optional
Icon type	`icon-type`	Font Awesome icon weight Suggested values `fa-solid` `fa-regular` `fa-light` `fa-thin` `fa-duotone`	String	suggested
Link to page	`link`	no description	Page name	suggested
Direction	`direction`	click if RTL Suggested values `rtl`	Unknown	optional

@@ Line 3: / Line 3: @@
 == openfox colors: ==
+==== Source ====
+<pre><nowiki>
+{{Alert|content=a tailwind based skin|content bold=Lisa:|type=top border|bg-color=bg-light-purple|border-color=border-fox-purple|text-color=text-fox-purple|icon-type=fa-regular}}
+</nowiki></pre>
 {{Alert|content=a tailwind based skin|content bold=Lisa:|type=top border|bg-color=bg-light-purple|border-color=border-fox-purple|text-color=text-fox-purple|icon-type=fa-regular}}
@@ Line 179: / Line 184: @@
 |traditional = <div class="{{{bg-color|bg-red-100}}} border {{{border-color|border-red-400}}} {{{text-color|text-red-700}}} px-4 py-3 rounded relative" role="alert">{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2}} }}<span class="font-bold">{{{content bold|}}}</span> <span class="block sm:inline">{{{content|}}}</span>
 </div>
-|modern = <div class="{{{border-color|bg-indigo-900}}} text-center py-4 lg:px-4"><div class="p-2 {{{bg-color|bg-indigo-800}}} items-center {{{text-color|text-indigo-100}}} leading-none lg:rounded-full flex lg:inline-flex" role="alert">{{#if:{{{content bold|}}}|<span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold me-3">{{{content bold}}}</span>}}<span class="font- me-2 text-left flex-auto">{{{content|}}}</span>{{#if:{{{link|}}}|{{i|angle-{{{direction|right}}}|far|fill-current opacity-75 h-4 w-4}} }}</div>
+|modern = <div class="{{{border-color|bg-indigo-900}}} text-center py-4 lg:px-4"><div class="p-2 {{{bg-color|bg-indigo-800}}} items-center {{{text-color|text-indigo-100}}} leading-none lg:rounded-full flex lg:inline-flex" role="alert">{{#if:{{{content bold|}}}{{{icon|}}}|<span class="flex rounded-full bg-indigo-500 uppercase align-items-center px-2 py-1 text-xs font-bold me-3">{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2 fill-current}} }}{{{content bold}}}</span>}}<span class="me-2 text-left flex-auto">{{{content|}}}</span>{{#if:{{{link|}}}|{{i|angle-{{{direction|right}}}|far|fill-current opacity-75 h-4 w-4}} }}</div>
 </div>
-|left border = <div class="not-prose {{{bg-color|bg-orange-100}}} border-l-4 {{{border-color|border-orange-500}}} {{{text-color|text-orange-700}}} p-4" role="alert">
+|left border = <div class="not-prose {{{bg-color|bg-orange-100}}} border-l-4 {{{border-color|border-orange-500}}} {{{text-color|text-orange-700}}} p-4 {{#if:{{{icon|}}}|flex}}" role="alert">
+{{#if:{{{icon|}}}|<div class="flex align-items-center">{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2 {{#if:{{{content bold|}}}|{{#if:{{{content|}}}|{{{icon-size|fa-3x}}}}}|{{{icon-size|fa-2x}}}}}}}</div><div>}}{{#if:{{{content bold|}}}|<p class="font-bold">{{{content bold}}}</p>}}
-<p class="font-bold">{{{content bold|}}}</p>
-<p>{{{content|}}}</p>
+{{#if:{{{content|}}}|<p>{{{content}}}</p>}}{{#if:{{{icon|}}}|</div>}}
 </div>
 |titled = <div class="not-prose" role="alert">
 <div class="bg-red-500 text-white font-bold rounded-t px-4 py-2">
-{{{content bold|}}}</div>
+{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2 fill-current {{{icon-size|}}}}} }} {{{content bold|}}}</div>
 <div class="border border-t-0 {{{border-color|border-red-400}}} rounded-b {{{bg-color|bg-red-100}}} px-4 py-3 {{{text-color|text-red-700}}}">
 <p>{{{content|}}}</p>
 </div></div>
-|solid = <div class="not-prose flex items-center {{{bg-color|bg-blue-500}}} {{{text-color|text-white}}} text-sm font-bold px-4 py-3" role="alert">{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2}} }}
+|solid = <div class="not-prose flex items-center {{{bg-color|bg-blue-500}}} {{{text-color|text-white}}} text-sm font-bold px-4 py-3" role="alert">{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2 {{{icon-size|}}}}} }}
 <p>{{#if:{{{content bold|}}}|'''{{{content bold}}}'''|}} {{{content|}}}</p>
 </div>
-|top border = <div class="not-prose {{{bg-color|bg-teal-100}}} border-t-4 {{{border-color|border-teal-500}}} rounded-b {{{text-color|text-teal-900}}} px-4 py-3 shadow-md" role="alert"><div class="flex"><div class="py-1">{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|fa-xl fill-current h-6 w-6 text-teal-500 mr-4}} }}</div>
+|top border = <div class="not-prose {{{bg-color|bg-teal-100}}} border-t-4 {{{border-color|border-teal-500}}} rounded-b {{{text-color|text-teal-900}}} px-4 py-3 shadow-md" role="alert"><div class="flex"><div class="py-1">{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|fa-xl fill-current {{{icon-size|}}} h-6 w-6 {{{text-color|text-teal-500}}} mr-4}} }}</div>
 <div>
 <p class="font-bold">{{{content bold|}}}</p>
@@ Line 201: / Line 206: @@
 </div>
 </div>
-|banner = <div class="not-prose {{{bg-color|bg-blue-100}}} border-t border-b {{{border-color|border-blue-500}}} {{{text-color|text-blue-700}}} px-4 py-3" role="alert">
+|banner = <div class="not-prose {{{bg-color|bg-blue-100}}} border-t border-b {{{border-color|border-blue-500}}} {{{text-color|text-blue-700}}} px-4 py-3 {{#if:{{{icon|}}}|flex}}" role="alert">
+{{#if:{{{icon|}}}|<div class="flex align-items-center">{{i|{{{icon}}}|{{{icon-type|fal}}}|me-4 {{#if:{{{content bold|}}}|{{#if:{{{content|}}}|{{{icon-size|fa-2x}}}}}|{{{icon-size|}}}}}}}</div><div>}}
 <p class="font-bold">{{{content bold|}}}</p>
-<p class="text-sm">{{{content|}}}</p>
+<p class="text-sm">{{{content|}}}</p>{{#if:{{{icon|}}}|</div>}}
 </div>
 |

openfox.io template repository

Template:Alert: Difference between revisions

Revision as of 05:52, 2 May 2025

Contents

openfox colors:

Source

Traditional

Source

Result

Modern with Badge

Source

Result

Left Accent Border

Source

Result

Titled

Source

Result

Solid

Source

Result

Top Accent Border

Source

Result

Banner

Source

Result

Titled

Source

Result