Template:Alert: Difference between revisions

Browse history interactively
← Older edit
Content deleted Content added
VisualWikitext
No edit summary
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 5: Line 5:
==== Source ====
==== Source ====
<pre><nowiki>
<pre><nowiki>
{{Alert|content=a tailwind based skin|content bold=Lisa:|type=top border|bg-color=bg-light-purple|border-color=border- fox-{{{fox-color|purple}}}|text-color=text- fox-{{{fox-color|purple}}}|icon-type=fa-regular}}
{{Alert|content=a tailwind based skin|content bold=Lisa:|type=top border|bg-color=bg-light-purple|border-color=border-fox-{{{fox-color|purple}}}|text-color=text-fox-purple|icon-type=fa-regular}}
</nowiki></pre>
</nowiki></pre>


{{Alert|content=a tailwind based skin|content bold=Lisa:|type=top border|bg-color=bg-light-purple|border-color=border- fox-{{{fox-color|purple}}}|text-color=text- fox-{{{fox-color|purple}}}|icon-type=fa-regular}}
{{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 ===
=== Traditional ===
Line 231: 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-purple}}} border {{{border-color|border-fox-{{{fox-color|purple}}}}}} {{{text-color|text- fox-{{{fox-color|purple}}}}}} px-4 py-3 rounded relative {{#if:{{{link|{{{external-link|}}}}}}|flex justify-between align-items-center {{{{hover|transition-all hover:bg- fox-{{{fox-color|purple}}} hover:border- fox-{{{fox-color|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>
|fox = <div class="{{{bg-color|bg-light-purple}}} border {{{border-color|border-fox-{{{fox-color|purple}}}}}} {{{text-color|text-fox-{{{fox-color|purple}}}}}} px-4 py-3 rounded relative {{#if:{{{link|{{{external-link|}}}}}}|flex justify-between align-items-center {{{{hover|transition-all hover:bg-fox-{{{fox-color|purple}}} hover:border-fox-{{{fox-color|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>
Line 274: Line 274:
"type": "string",
"type": "string",
"suggestedvalues": [
"suggestedvalues": [
"border- fox-purple",
"border-fox-purple",
"border-fox-azure",
"border-fox-azure",
"bg-fox-magenta"
"bg-fox-magenta"
Line 287: Line 287:
"type": "string",
"type": "string",
"suggestedvalues": [
"suggestedvalues": [
"text- fox-purple",
"text-fox-purple",
"text-fox-azure",
"text-fox-azure",
"text-fox-magenta"
"text-fox-magenta"
Line 347: Line 347:
"description": "click if RTL",
"description": "click if RTL",
"suggestedvalues": [
"suggestedvalues": [
"rtl"
"left"
]
]
},
},

Latest revision as of 04:49, 4 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-{{{fox-color|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
left
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
Leading colorfox-color

Leading color from openfox.io pallet

Suggested values
purple azure magenta
Stringoptional
Retrieved from "https://templates.openfox.io/w/index.php?title=Template:Alert&oldid=4109"