Banner
A lightweight, configurable component for displaying important messages or alerts to users.
<!-- Banner -->
<!-- An Alpine.js and Tailwind CSS component by https://pinemix.com -->
<div
x-data="{
open: false,
dismissible: true,
position: 'top', // top, bottom
content: '',
link: '',
// Set transition classes based on position
transitionClasses: {
'x-transition:enter-start'() {
if (this.position === 'top') {
return 'opacity-0 -translate-y-4';
} else if (this.position === 'bottom') {
return 'opacity-0 translate-y-4';
}
},
'x-transition:leave-end'() {
if (this.position === 'top') {
return 'opacity-0 -translate-y-4';
} else if (this.position === 'bottom') {
return 'opacity-0 translate-y-4';
}
},
},
// Open the banner
openBanner(content, link, dismissible) {
this.content = content || this.content;
this.link = link || this.link;
this.dismissible = dismissible || this.dismissible;
this.open = true;
},
// Close the banner
closeBanner() {
this.open = false;
},
}"
>
<!-- Banner Container -->
<div
x-cloak
x-show="open"
x-bind="transitionClasses"
x-transition:enter="transition ease-out duration-150"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100 translate-y-0"
class="fixed inset-x-0 top-0 z-40 border-zinc-200 bg-white dark:border-zinc-700/50 dark:bg-zinc-800"
x-bind:class="{
'top-0 border-b shadow-xl shadow-zinc-400/10 dark:shadow-zinc-950/10': position === 'top',
'bottom-0 border-t shadow-[0_0_25px_-5px_rgba(161,161,170,0.1),0_0_10px_-6px_rgba(161,161,170,0.06)] dark:shadow-[0_0_25px_-5px_rgba(161,161,170,0.2),0_10px_-6px_rgba(161,161,170,0.12)]': position === 'bottom',
}"
>
<div
class="container mx-auto flex min-h-16 items-center gap-4 px-4 py-2 xl:max-w-7xl"
>
<!-- Banner Content -->
<div
class="flex grow items-center gap-2 font-medium"
x-bind:class="{
'justify-center': !link && !dismissible,
}"
x-text="content"
></div>
<!-- END Banner Content -->
<!-- Banner Actions -->
<div
x-cloak
x-show="link || dismissible"
class="flex flex-none items-center gap-2"
>
<!-- Learn More Link -->
<a
x-cloak
x-show="link"
x-bind:href="link === '#' ? 'javascript:void(0)' : link"
class="group inline-flex items-center gap-1 rounded-xl bg-zinc-100 px-2.5 py-1 text-xs font-medium hover:bg-zinc-200/75 active:bg-zinc-100 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 dark:active:bg-zinc-700"
>
<span>Learn more</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="hi-micro hi-arrow-top-right-on-square inline-block size-4 opacity-50 transition group-hover:opacity-75"
>
<path
d="M6.22 8.72a.75.75 0 0 0 1.06 1.06l5.22-5.22v1.69a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69L6.22 8.72Z"
/>
<path
d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 0 0 7 4H4.75A2.75 2.75 0 0 0 2 6.75v4.5A2.75 2.75 0 0 0 4.75 14h4.5A2.75 2.75 0 0 0 12 11.25V9a.75.75 0 0 0-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25v-4.5Z"
/>
</svg>
</a>
<!-- END Learn More Link -->
<!-- Close Banner Button -->
<button
x-cloak
x-show="dismissible"
@click="open = false"
type="button"
class="inline-flex items-center justify-center text-zinc-500 hover:text-zinc-700 active:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300 dark:active:text-zinc-400"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-x-mark inline-block size-5"
aria-hidden="true"
>
<path
d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
/>
</svg>
<span class="sr-only">Close Banner</span>
</button>
<!-- END Close Banner Button -->
</div>
<!-- END Banner Actions -->
</div>
</div>
<!-- End Banner Container -->
<!-- Placeholder -->
<div
class="flex items-center justify-center rounded-lg border-2 border-dashed border-zinc-200/75 bg-zinc-50 py-44 text-sm font-medium text-zinc-400 dark:border-zinc-700 dark:bg-zinc-950/25 dark:text-zinc-600"
>
<!-- Open Banner Button -->
<button
@click="openBanner('6.0 update is now available! 🥳')"
type="button"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-3 py-2 text-sm font-medium leading-5 text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500/50 active:border-zinc-700 active:bg-zinc-700 dark:border-zinc-700/50 dark:bg-zinc-700/50 dark:ring-zinc-700/50 dark:hover:border-zinc-700 dark:hover:bg-zinc-700/75 dark:active:border-zinc-700/50 dark:active:bg-zinc-700/50"
>
Open Banner
</button>
<!-- END Open Banner Button -->
</div>
<!-- END Placeholder -->
</div>
<!-- End Banner -->
With Link
<!-- Banner: With Link -->
<!-- An Alpine.js and Tailwind CSS component by https://pinemix.com -->
<div
x-data="{
open: false,
dismissible: true,
position: 'top', // top, bottom
content: '',
link: '',
// Set transition classes based on position
transitionClasses: {
'x-transition:enter-start'() {
if (this.position === 'top') {
return 'opacity-0 -translate-y-4';
} else if (this.position === 'bottom') {
return 'opacity-0 translate-y-4';
}
},
'x-transition:leave-end'() {
if (this.position === 'top') {
return 'opacity-0 -translate-y-4';
} else if (this.position === 'bottom') {
return 'opacity-0 translate-y-4';
}
},
},
// Open the banner
openBanner(content, link, dismissible) {
this.content = content || this.content;
this.link = link || this.link;
this.dismissible = dismissible || this.dismissible;
this.open = true;
},
// Close the banner
closeBanner() {
this.open = false;
},
}"
>
<!-- Banner Container -->
<div
x-cloak
x-show="open"
x-bind="transitionClasses"
x-transition:enter="transition ease-out duration-150"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100 translate-y-0"
class="fixed inset-x-0 top-0 z-40 border-zinc-200 bg-white dark:border-zinc-700/50 dark:bg-zinc-800"
x-bind:class="{
'top-0 border-b shadow-xl shadow-zinc-400/10 dark:shadow-zinc-950/10': position === 'top',
'bottom-0 border-t shadow-[0_0_25px_-5px_rgba(161,161,170,0.1),0_0_10px_-6px_rgba(161,161,170,0.06)] dark:shadow-[0_0_25px_-5px_rgba(161,161,170,0.2),0_10px_-6px_rgba(161,161,170,0.12)]': position === 'bottom',
}"
>
<div
class="container mx-auto flex min-h-16 items-center gap-4 px-4 py-2 xl:max-w-7xl"
>
<!-- Banner Content -->
<div
class="flex grow items-center gap-2 font-medium"
x-bind:class="{
'justify-center': !link && !dismissible,
}"
x-text="content"
></div>
<!-- END Banner Content -->
<!-- Banner Actions -->
<div
x-cloak
x-show="link || dismissible"
class="flex flex-none items-center gap-2"
>
<!-- Learn More Link -->
<a
x-cloak
x-show="link"
x-bind:href="link === '#' ? 'javascript:void(0)' : link"
class="group inline-flex items-center gap-1 rounded-xl bg-zinc-100 px-2.5 py-1 text-xs font-medium hover:bg-zinc-200/75 active:bg-zinc-100 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 dark:active:bg-zinc-700"
>
<span>Learn more</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="hi-micro hi-arrow-top-right-on-square inline-block size-4 opacity-50 transition group-hover:opacity-75"
>
<path
d="M6.22 8.72a.75.75 0 0 0 1.06 1.06l5.22-5.22v1.69a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69L6.22 8.72Z"
/>
<path
d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 0 0 7 4H4.75A2.75 2.75 0 0 0 2 6.75v4.5A2.75 2.75 0 0 0 4.75 14h4.5A2.75 2.75 0 0 0 12 11.25V9a.75.75 0 0 0-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25v-4.5Z"
/>
</svg>
</a>
<!-- END Learn More Link -->
<!-- Close Banner Button -->
<button
x-cloak
x-show="dismissible"
@click="open = false"
type="button"
class="inline-flex items-center justify-center text-zinc-500 hover:text-zinc-700 active:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300 dark:active:text-zinc-400"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-x-mark inline-block size-5"
aria-hidden="true"
>
<path
d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
/>
</svg>
<span class="sr-only">Close Banner</span>
</button>
<!-- END Close Banner Button -->
</div>
<!-- END Banner Actions -->
</div>
</div>
<!-- End Banner Container -->
<!-- Placeholder -->
<div
class="flex items-center justify-center rounded-lg border-2 border-dashed border-zinc-200/75 bg-zinc-50 py-44 text-sm font-medium text-zinc-400 dark:border-zinc-700 dark:bg-zinc-950/25 dark:text-zinc-600"
>
<!-- Open Banner Button -->
<button
@click="openBanner('6.0 update is now available! 🥳', '#')"
type="button"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-3 py-2 text-sm font-medium leading-5 text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500/50 active:border-zinc-700 active:bg-zinc-700 dark:border-zinc-700/50 dark:bg-zinc-700/50 dark:ring-zinc-700/50 dark:hover:border-zinc-700 dark:hover:bg-zinc-700/75 dark:active:border-zinc-700/50 dark:active:bg-zinc-700/50"
>
Open Banner
</button>
<!-- END Open Banner Button -->
</div>
<!-- END Placeholder -->
</div>
<!-- End Banner: With Link -->
Position Bottom
<!-- Banner: Position Bottom -->
<!-- An Alpine.js and Tailwind CSS component by https://pinemix.com -->
<div
x-data="{
open: false,
dismissible: true,
position: 'bottom', // top, bottom
content: '',
link: '',
// Set transition classes based on position
transitionClasses: {
'x-transition:enter-start'() {
if (this.position === 'top') {
return 'opacity-0 -translate-y-4';
} else if (this.position === 'bottom') {
return 'opacity-0 translate-y-4';
}
},
'x-transition:leave-end'() {
if (this.position === 'top') {
return 'opacity-0 -translate-y-4';
} else if (this.position === 'bottom') {
return 'opacity-0 translate-y-4';
}
},
},
// Open the banner
openBanner(content, link, dismissible) {
this.content = content || this.content;
this.link = link || this.link;
this.dismissible = dismissible || this.dismissible;
this.open = true;
},
// Close the banner
closeBanner() {
this.open = false;
},
}"
>
<!-- Banner Container -->
<div
x-cloak
x-show="open"
x-bind="transitionClasses"
x-transition:enter="transition ease-out duration-150"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100 translate-y-0"
class="fixed inset-x-0 top-0 z-40 border-zinc-200 bg-white dark:border-zinc-700/50 dark:bg-zinc-800"
x-bind:class="{
'top-0 border-b shadow-xl shadow-zinc-400/10 dark:shadow-zinc-950/10': position === 'top',
'bottom-0 border-t shadow-[0_0_25px_-5px_rgba(161,161,170,0.1),0_0_10px_-6px_rgba(161,161,170,0.06)] dark:shadow-[0_0_25px_-5px_rgba(161,161,170,0.2),0_10px_-6px_rgba(161,161,170,0.12)]': position === 'bottom',
}"
>
<div
class="container mx-auto flex min-h-16 items-center gap-4 px-4 py-2 xl:max-w-7xl"
>
<!-- Banner Content -->
<div
class="flex grow items-center gap-2 font-medium"
x-bind:class="{
'justify-center': !link && !dismissible,
}"
x-text="content"
></div>
<!-- END Banner Content -->
<!-- Banner Actions -->
<div
x-cloak
x-show="link || dismissible"
class="flex flex-none items-center gap-2"
>
<!-- Learn More Link -->
<a
x-cloak
x-show="link"
x-bind:href="link === '#' ? 'javascript:void(0)' : link"
class="group inline-flex items-center gap-1 rounded-xl bg-zinc-100 px-2.5 py-1 text-xs font-medium hover:bg-zinc-200/75 active:bg-zinc-100 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 dark:active:bg-zinc-700"
>
<span>Learn more</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="hi-micro hi-arrow-top-right-on-square inline-block size-4 opacity-50 transition group-hover:opacity-75"
>
<path
d="M6.22 8.72a.75.75 0 0 0 1.06 1.06l5.22-5.22v1.69a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69L6.22 8.72Z"
/>
<path
d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 0 0 7 4H4.75A2.75 2.75 0 0 0 2 6.75v4.5A2.75 2.75 0 0 0 4.75 14h4.5A2.75 2.75 0 0 0 12 11.25V9a.75.75 0 0 0-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25v-4.5Z"
/>
</svg>
</a>
<!-- END Learn More Link -->
<!-- Close Banner Button -->
<button
x-cloak
x-show="dismissible"
@click="open = false"
type="button"
class="inline-flex items-center justify-center text-zinc-500 hover:text-zinc-700 active:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300 dark:active:text-zinc-400"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-x-mark inline-block size-5"
aria-hidden="true"
>
<path
d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
/>
</svg>
<span class="sr-only">Close Banner</span>
</button>
<!-- END Close Banner Button -->
</div>
<!-- END Banner Actions -->
</div>
</div>
<!-- End Banner Container -->
<!-- Placeholder -->
<div
class="flex items-center justify-center rounded-lg border-2 border-dashed border-zinc-200/75 bg-zinc-50 py-44 text-sm font-medium text-zinc-400 dark:border-zinc-700 dark:bg-zinc-950/25 dark:text-zinc-600"
>
<!-- Open Banner Button -->
<button
@click="openBanner('6.0 update is now available! 🥳')"
type="button"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-3 py-2 text-sm font-medium leading-5 text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500/50 active:border-zinc-700 active:bg-zinc-700 dark:border-zinc-700/50 dark:bg-zinc-700/50 dark:ring-zinc-700/50 dark:hover:border-zinc-700 dark:hover:bg-zinc-700/75 dark:active:border-zinc-700/50 dark:active:bg-zinc-700/50"
>
Open Banner
</button>
<!-- END Open Banner Button -->
</div>
<!-- END Placeholder -->
</div>
<!-- End Banner: Position Bottom -->
Without Close Button
<!-- Banner: Without Close Button -->
<!-- An Alpine.js and Tailwind CSS component by https://pinemix.com -->
<div
x-data="{
open: false,
dismissible: false,
position: 'top', // top, bottom
content: '',
link: '',
// Set transition classes based on position
transitionClasses: {
'x-transition:enter-start'() {
if (this.position === 'top') {
return 'opacity-0 -translate-y-4';
} else if (this.position === 'bottom') {
return 'opacity-0 translate-y-4';
}
},
'x-transition:leave-end'() {
if (this.position === 'top') {
return 'opacity-0 -translate-y-4';
} else if (this.position === 'bottom') {
return 'opacity-0 translate-y-4';
}
},
},
// Open the banner
openBanner(content, link, dismissible) {
this.content = content || this.content;
this.link = link || this.link;
this.dismissible = dismissible || this.dismissible;
this.open = true;
},
// Close the banner
closeBanner() {
this.open = false;
},
}"
>
<!-- Banner Container -->
<div
x-cloak
x-show="open"
x-bind="transitionClasses"
x-transition:enter="transition ease-out duration-150"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100 translate-y-0"
class="fixed inset-x-0 top-0 z-40 border-zinc-200 bg-white dark:border-zinc-700/50 dark:bg-zinc-800"
x-bind:class="{
'top-0 border-b shadow-xl shadow-zinc-400/10 dark:shadow-zinc-950/10': position === 'top',
'bottom-0 border-t shadow-[0_0_25px_-5px_rgba(161,161,170,0.1),0_0_10px_-6px_rgba(161,161,170,0.06)] dark:shadow-[0_0_25px_-5px_rgba(161,161,170,0.2),0_10px_-6px_rgba(161,161,170,0.12)]': position === 'bottom',
}"
>
<div
class="container mx-auto flex min-h-16 items-center gap-4 px-4 py-2 xl:max-w-7xl"
>
<!-- Banner Content -->
<div
class="flex grow items-center gap-2 font-medium"
x-bind:class="{
'justify-center': !link && !dismissible,
}"
x-text="content"
></div>
<!-- END Banner Content -->
<!-- Banner Actions -->
<div
x-cloak
x-show="link || dismissible"
class="flex flex-none items-center gap-2"
>
<!-- Learn More Link -->
<a
x-cloak
x-show="link"
x-bind:href="link === '#' ? 'javascript:void(0)' : link"
class="group inline-flex items-center gap-1 rounded-xl bg-zinc-100 px-2.5 py-1 text-xs font-medium hover:bg-zinc-200/75 active:bg-zinc-100 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 dark:active:bg-zinc-700"
>
<span>Learn more</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="hi-micro hi-arrow-top-right-on-square inline-block size-4 opacity-50 transition group-hover:opacity-75"
>
<path
d="M6.22 8.72a.75.75 0 0 0 1.06 1.06l5.22-5.22v1.69a.75.75 0 0 0 1.5 0v-3.5a.75.75 0 0 0-.75-.75h-3.5a.75.75 0 0 0 0 1.5h1.69L6.22 8.72Z"
/>
<path
d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 0 0 7 4H4.75A2.75 2.75 0 0 0 2 6.75v4.5A2.75 2.75 0 0 0 4.75 14h4.5A2.75 2.75 0 0 0 12 11.25V9a.75.75 0 0 0-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25v-4.5Z"
/>
</svg>
</a>
<!-- END Learn More Link -->
<!-- Close Banner Button -->
<button
x-cloak
x-show="dismissible"
@click="open = false"
type="button"
class="inline-flex items-center justify-center text-zinc-500 hover:text-zinc-700 active:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300 dark:active:text-zinc-400"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="hi-mini hi-x-mark inline-block size-5"
aria-hidden="true"
>
<path
d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"
/>
</svg>
<span class="sr-only">Close Banner</span>
</button>
<!-- END Close Banner Button -->
</div>
<!-- END Banner Actions -->
</div>
</div>
<!-- End Banner Container -->
<!-- Placeholder -->
<div
class="flex items-center justify-center rounded-lg border-2 border-dashed border-zinc-200/75 bg-zinc-50 py-44 text-sm font-medium text-zinc-400 dark:border-zinc-700 dark:bg-zinc-950/25 dark:text-zinc-600"
>
<!-- Open Banner Button -->
<button
@click="openBanner('6.0 update is now available! 🥳')"
type="button"
class="inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-3 py-2 text-sm font-medium leading-5 text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:outline-none focus:ring-2 focus:ring-zinc-500/50 active:border-zinc-700 active:bg-zinc-700 dark:border-zinc-700/50 dark:bg-zinc-700/50 dark:ring-zinc-700/50 dark:hover:border-zinc-700 dark:hover:bg-zinc-700/75 dark:active:border-zinc-700/50 dark:active:bg-zinc-700/50"
>
Open Banner
</button>
<!-- END Open Banner Button -->
</div>
<!-- END Placeholder -->
</div>
<!-- End Banner: Without Close Button -->
Props
The available data properties for this component.
| Property | Default | Description |
|---|---|---|
| open | false | Sets the banner default visibility |
| dismissible | true | Sets the banner's close button visibility |
| position | top | Sets the banner position, available options are 'top' and 'bottom' |
| content | '' | Sets the banner default content |
| link | '' | Sets the banner default link |