Template:Alert: Difference between revisions

Browse history interactively
← Older editNewer edit →
Content deleted Content added
VisualWikitext
No edit summary
No edit summary
Line 28: Line 28:
|icon = info-circle
|icon = info-circle
|icon-type = fad
|icon-type = fad
|link=https://example.com
}}
}}
=== Modern with Badge ===
=== Modern with Badge ===
Line 180: Line 181:
|link=https://example.com
|link=https://example.com
}}
}}

{{#if:}}
</noinclude><includeonly>
</noinclude><includeonly>
{{#switch:{{{type|}}}
{{#switch:{{{type|}}}
|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>
|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}}" 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}}}|far|fill-current opacity-75 h-4 w-4}}</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}}} 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>
|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|{{{external-link|}}}}}}|{{i|angle-{{{direction|right}}}|far|fill-current opacity-75 h-4 w-4}} }}</div>
</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 {{#if:{{{icon|}}}|flex}}" 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">
Line 333: Line 336:
"label": {
"label": {
"he": "גודל האייקון",
"he": "גודל האייקון",
"en": "גודל האייקון"
"en": "Icon size"
},
},
"type": "string",
"type": "string",
Line 349: Line 352:
"fa-5x"
"fa-5x"
]
]
},
"external-link": {
"label": {
"en": "External link",
"he": "קישור חיצוני"
},
"description": {
"he": "בסוגים המתאימים"
},
"type": "url"
}
}
},
},
Line 365: Line 378:
"icon-type",
"icon-type",
"link",
"link",
"external-link",
"direction",
"direction",
"icon-size"
"icon-size"

Revision as of 06:33, 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
|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
|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

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
Retrieved from "https://templates.openfox.io/w/index.php?title=Template:Alert&oldid=4098"