Template:Alert: Difference between revisions

Browse history interactively

← Older edit Newer edit →

Content deleted Content added

VisualWikitext

Inline

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

Main Page

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

This isan alert

https://example.com

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
|external-link=https://example.com
}}

Result

This is an alert

https://example.com

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
External link	`external-link`	no description	URL	optional
Direction	`direction`	click if RTL Suggested values `rtl`	Unknown	optional
Icon size	`icon-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`	String	optional
Hover class for links	`hover`	no description	Unknown	optional

@@ Line 185: / Line 185: @@
 </noinclude><includeonly>
 {{#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 {{#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}}}|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" 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>
 </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">
@@ Line 198: / Line 198: @@
 <p>{{{content|}}}</p>
 </div></div>
-|solid = <div class="not-prose relative flex items-center {{{bg-color|bg-blue-500}}} {{{text-color|text-white}}} text-sm font-bold px-4 py-3 {{#if:{{{link|{{{external-link|}}}}}}|flex justify-between align-items-center}}" role="alert">{{#if:{{{link|{{{external-link|}}}}}}|<div class="flex items-center">}}{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2 {{{icon-size|}}}}} }}
+|solid = <div class="not-prose relative flex items-center {{{bg-color|bg-blue-500}}} {{{text-color|text-white}}} text-sm font-bold px-4 py-3 {{#if:{{{link|{{{external-link|}}}}}}|flex justify-between align-items-center hover:bg-blue-600 hover:text-white}}" role="alert">{{#if:{{{link|{{{external-link|}}}}}}|<div class="flex items-center">}}{{#if:{{{icon|}}}|{{i|{{{icon}}}|{{{icon-type|fal}}}|me-2 {{{icon-size|}}}}} }}
 <p>{{#if:{{{content bold|}}}|'''{{{content bold}}}'''|}} {{{content|}}}</p>{{#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>
@@ Line 361: / Line 361: @@
 			},
 			"type": "url"
+		},
+		"hover": {
+			"label": {
+				"en": "Hover class for links",
+				"he": "קלאס לשינוי מצב במעבר עכבר על לינק"
+			}
 		}
 	},
@@ Line 379: / Line 385: @@
 		"external-link",
 		"direction",
-		"icon-size"
+		"icon-size",
+		"hover"
 	],
 	"format": "inline"

openfox.io template repository

Template:Alert: Difference between revisions

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