Notice

Displays information or an alert that explains nearby content.
Example
Theme
Default
Default
Light
Dark
Scale
Medium
Large
Medium
Small
Look Here
Hold down the brake lever and lightly press the "GO" button
<div class="ts-notice">
    <div class="title">Look Here</div>
    <div class="content">Hold down the brake lever and lightly press the "GO" button</div>
</div>
Introduction

This component is usually used for the message that appears after the user has performed an action (e.g., form successfully sent, delete failed).

Variations
Outlined

Draws only the border for a Notice to keep me simple and less conspicuous.

Test Phase
The site is currently being tested, please wait a few minutes and it will be back to normal.
<div class="ts-notice is-outlined">
    <div class="title">Test Phase</div>
    <div class="content">
        The site is currently being tested, please wait a few minutes and it will be back to normal.
    </div>
</div>
Negative

With dangerous implications.

Failed
To delete this folder, empty the files first.
<div class="ts-notice is-negative">
    <div class="title">Failed</div>
    <div class="content">To delete this folder, empty the files first.</div>
</div>
Sizes

Change the size of the Notice.

Small
Here is a text message.
Default
Here is a text message.
Large
Here is a text message.
<div class="ts-notice is-small">
    <div class="title">Small</div>
    <div class="content">Here is a text message.</div>
</div>
<div class="ts-notice">
    <div class="title">Default</div>
    <div class="content">Here is a text message.</div>
</div>
<div class="ts-notice is-large">
    <div class="title">Large</div>
    <div class="content">Here is a text message.</div>
</div>
Dense

Presents a dense Notice by changing the padding of it.

Request Sent
You will be able to see their online status once your friend request is accepted.
<div class="ts-notice is-dense">
    <div class="title">Request Sent</div>
    <div class="content">You will be able to see their online status once your friend request is accepted.</div>
</div>
Looking for similar components?
Designed by Yami Odymel from Taiwan with the love of the contributors ❤️. The source code is licensed under MIT and the documents are CC 0 public domain. Tocas UI is a design language of Caris Events, which is owned by Sorae & Co.
Translators: Yami Odymel
An organization brand logo that owns Tocas UI