Template:Alert: Difference between revisions

Browse history interactively
← Older editNewer edit →
Content deleted Content added
VisualWikitext
No edit summary
No edit summary
Line 174: Line 174:
==== Result ====
==== Result ====
{{Alert
{{Alert
|type=Titled
|type=titled
|content = an alert
|content = an alert
|content bold = This is
|content bold = This is
Line 182: Line 182:
}}
}}


=== Defualt (no type) ===
{{#if:}}
==== Source ====
<pre><nowiki>
{{Alert
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|external-link=https://example.com
}}
</nowiki></pre>
==== Result ====
{{Alert
|content = an alert
|content bold = This is
|icon = info-circle
|icon-type = fad
|external-link=https://example.com
}}
</noinclude><includeonly>
</noinclude><includeonly>
{{#switch:{{{type|}}}
{{#switch:{{{type|fox}}}
|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 {{#if:{{{link|{{{external-link|}}}}}}|flex justify-between align-items-center {{{{hover|hover:bg-red-200 hover:border-red-500 hover:text-red-800}}} }}" role="alert">{{#if:{{{link|{{{external-link|}}}}}}|<div>}}{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2}} }}<span class="font-bold">{{{content bold|}}}</span> <span class="block sm:inline">{{{content|}}}</span>{{#if:{{{link|{{{external-link|}}}}}}|</div><div>{{i|angle-{{{direction|right}}}|fas|fill-current opacity-75 h-4 w-4}}<div class="overlay-link">{{#if:{{{external-link|}}}|{{{external-link|}}}|{{#if:{{{link|}}}|[[{{{link}}}]]}} }}</div></div>}}</div>
|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 {{#if:{{{link|{{{external-link|}}}}}}|flex justify-between align-items-center {{{{hover|hover:bg-red-200 hover:border-red-500 hover:text-red-800}}} }}" role="alert">{{#if:{{{link|{{{external-link|}}}}}}|<div>}}{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2}} }}<span class="font-bold">{{{content bold|}}}</span> <span class="block sm:inline">{{{content|}}}</span>{{#if:{{{link|{{{external-link|}}}}}}|</div><div>{{i|angle-{{{direction|right}}}|fas|fill-current opacity-75 h-4 w-4}}<div class="overlay-link">{{#if:{{{external-link|}}}|{{{external-link|}}}|{{#if:{{{link|}}}|[[{{{link}}}]]}} }}</div></div>}}</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}}} relative items-center {{{text-color|text-indigo-100}}} leading-none lg:rounded-full flex lg:inline-flex {{#if:{{{link|{{{external-link|}}}}}}|hover:bg-indigo-900 hover:text-white}}" 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|{{{external-link|}}}}}}|{{i|angle-{{{direction|right}}}|far|fill-current opacity-75 h-4 w-4}}<div class="overlay-link">{{#if:{{{external-link|}}}|{{{external-link|}}}|{{#if:{{{link|}}}|[[{{{link}}}]]}} }}</div>}}</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}}} relative items-center {{{text-color|text-indigo-100}}} leading-none lg:rounded-full flex lg:inline-flex {{#if:{{{link|{{{external-link|}}}}}}|hover:bg-indigo-900 hover:text-white}}" 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|{{{external-link|}}}}}}|{{i|angle-{{{direction|right}}}|far|fill-current opacity-75 h-4 w-4}}<div class="overlay-link">{{#if:{{{external-link|}}}|{{{external-link|}}}|{{#if:{{{link|}}}|[[{{{link}}}]]}} }}</div>}}</div>
Line 213: Line 231:
<p class="text-sm">{{{content|}}}</p>{{#if:{{{icon|}}}|</div>}}
<p class="text-sm">{{{content|}}}</p>{{#if:{{{icon|}}}|</div>}}
</div>
</div>
|fox = <div class="{{{bg-color|bg-light-azure}}} border {{{border-color|border-fox-azure}}} {{{text-color|text-fox-azure}}} px-4 py-3 rounded relative {{#if:{{{link|{{{external-link|}}}}}}|flex justify-between align-items-center {{{{hover|transition hover:bg-fox-purple hover:border-fox-purple hover:text-white}}} }}" role="alert">{{#if:{{{link|{{{external-link|}}}}}}|<div>}}{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2}} }}<span class="font-bold">{{{content bold|}}}</span> <span class="block sm:inline">{{{content|}}}</span>{{#if:{{{link|{{{external-link|}}}}}}|</div><div>{{i|angle-{{{direction|right}}}|fas|fill-current opacity-75 h-4 w-4}}<div class="overlay-link">{{#if:{{{external-link|}}}|{{{external-link|}}}|{{#if:{{{link|}}}|[[{{{link}}}]]}} }}</div></div>}}</div>
|
}}</includeonly>
}}</includeonly>
<noinclude>
<noinclude>

Revision as of 07:36, 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}}



Traditional

Source

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

Result

Modern with Badge

Source

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

Result

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

Titled

Source

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

Result


Solid

Source

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

Result


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


Source

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

Result


Titled

Source

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

Result


Defualt (no type)

Source

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

Result


Template for text alerts and banners

Template parameters[Edit template data]

This template prefers inline formatting of parameters.

ParameterDescriptionTypeStatus
Contentcontent

no description

Linesuggested
Bold contentcontent bold

no description

Linesuggested
typetype

no description

Suggested values
traditional titled solid modern left border top border banner
Default
traditional
Stringsuggested
Background colorbg-color

no description

Suggested values
bg-light-azure bg-light-purple bg-light-magenta
Stringsuggested
Border colorborder-color

no description

Suggested values
border-fox-purple border-fox-azure bg-fox-magenta
Stringsuggested
Text colortext-color

no description

Suggested values
text-fox-purple text-fox-azure text-fox-magenta
Stringoptional
Iconicon

Font Awesome icon name

Stringoptional
Icon typeicon-type

Font Awesome icon weight

Suggested values
fa-solid fa-regular fa-light fa-thin fa-duotone
Stringsuggested
Link to pagelink

no description

Page namesuggested
External linkexternal-link

no description

URLoptional
Directiondirection

click if RTL

Suggested values
rtl
Unknownoptional
Icon sizeicon-size

no description

Suggested values
fa-2xs fa-xs fa-sm fa-lg fa-xl fa-2xl fa-1x fa-2x fa-3x fa-4x fa-5x
Stringoptional
Hover class for linkshover

no description

Unknownoptional
Retrieved from "https://templates.openfox.io/w/index.php?title=Template:Alert&oldid=4102"