Notice

View Source 

Usage

@import "winduum/src/components/notice/index.css" layer(utilities);

Variants

• default 

Props

• default 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Examples

Success

html

<div class="x-notice accent-success" role="alert">
    Success notice
</div>

vue

<script setup lang="ts">
    import { Notice } from '@/components/notice'
</script>

<template>
    <Notice class="accent-success">
        Success notice
    </Notice>
</template>

jsx

import { Notice } from '@/components/notice'

export function Example() {
    return (
        <Notice className="accent-success">
            Success notice
        </Notice>
    )
}

Error

<div class="x-notice accent-error" role="alert">
    Error notice
</div>

Warning

<div class="x-notice accent-warning" role="alert">
    Warning notice
</div>

Info

<div class="x-notice accent-info" role="alert">
    Info notice
</div>

Text

<div class="x-notice accent-error space-y-4" role="alert">
    <div class="x-text">
        <h4>Text notice</h4>
        <p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>. Nullam in elit iaculis, tristique nisi ut, mollis tellus. Nunc venenatis elit vel placerat commodo. Vestibulum odio neque, hendrerit nec venenatis at, tincidunt ut magna. Etiam hendrerit ultrices pharetra.</p>
    </div>
    <button class="x-button">
        <span>Button</span>
    </button>
</div>

Background

<div class="x-notice bg-error text-light text-center" role="alert">
    Error background notice
</div>