Notice

View Source 

Usage

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

Variants

• default 

Props

• default-props 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Examples

Success

html

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

vue

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

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

jsx

import { UiNotice } from '@/components/ui/notice'

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

Error

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

Warning

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

Info

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

Text

<div class="ui-notice accent-error" role="alert">
    <div class="ui-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="ui-btn">
        <span>Button</span>
    </button>
</div>

Background

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