Annonce

The annonce component is used to display an announcement on top of the hero section.

NewIntroduction Tailus UI Html 
<a href="#" class="annonce variant-mixed gap-2 sz-sm w-fit mx-auto">
  <span class="annonce-concern sz-xs variant-primary">New</span>
  <span class="text-title text-sm">Introduction Tailus UI Html</span>
</a>

Reference

Root

The parent component of the Annonce component

Prop
Type
Usage
size
enum
sz-[size]
variant
enum
variant-[variant]

Concern

The subject of the announcement

Prop
Type
Usage
size
enum
sz-[size]
variant
enum
variant-[variant]
intent
enum
intent-[intent]

Root variants

NewIntroduction Tailus UI HtmlNewIntroduction Tailus UI HtmlNewIntroduction Tailus UI HtmlNewIntroduction Tailus UI Html
 
<div class="space-y-6">
  <a href="#" class="annonce gap-2 sz-sm w-fit mx-auto">
      <span class="annonce-concern sz-xs variant-primary">New</span>
      <span class="text-title text-sm">Introduction Tailus UI Html</span>
  </a>

  <a href="#" class="annonce variant-outlined gap-2 sz-sm w-fit mx-auto">
      <span class="annonce-concern sz-xs variant-primary">New</span>
      <span class="text-title text-sm">Introduction Tailus UI Html</span>
  </a>

  <a href="#" class="annonce variant-soft gap-2 sz-sm w-fit mx-auto">
      <span class="annonce-concern sz-xs variant-primary">New</span>
      <span class="text-title text-sm">Introduction Tailus UI Html</span>
  </a>

  <a href="#" class="annonce variant-mixed gap-2 sz-sm w-fit mx-auto">
      <span class="annonce-concern sz-xs variant-primary">New</span>
      <span class="text-title text-sm">Introduction Tailus UI Html</span>
  </a>
</div>

Concern variants

NewIntroduction Tailus UI HtmlNewIntroduction Tailus UI Html
 
<div class="space-y-6">
  <a href="#" class="annonce variant-mixed gap-2 sz-sm w-fit mx-auto">
      <span class="annonce-concern sz-xs variant-primary">New</span>
      <span class="text-title text-sm">Introduction Tailus UI Html</span>
  </a>

  <a href="#" class="annonce variant-mixed gap-2 sz-sm w-fit mx-auto">
      <span class="annonce-concern sz-xs variant-neutral">New</span>
      <span class="text-title text-sm">Introduction Tailus UI Html</span>
  </a>
</div>