fc-message

Presentation of alert in different use cases.

Usage

<script>
  import '@forter/message';
</script>

<fc-message>
    <span>“If a man does not have sauce, then he is lost.</span>
    <span> But the same man can get lost in the sauce.”</span>
    <b>--Gucci Mane </b>
</fc-message>

Examples

<!-- Mix - Fill - Success -->
<fc-message type="fill" intent="success">Success</fc-message>

<!-- Mix - Fill - Danger -->
<fc-message type="fill" intent="danger">Danger</fc-message>

<!-- Mix - Fill - Warn -->
<fc-message type="fill" intent="warn">Warn</fc-message>

Properties

| Property | Attribute | Type | Description | |----------|-----------|--------------------------------------------------|-----------------------------------------------| | icon | icon | string | The message's icon instead of the default one | | intent | intent | "primary" \| "secondary" \| "success" \| "danger" \| "warn" | The message's intent. See Intents in README. | | type | type | "fill" \| "text" | The tag style type. |

Slots

| Name | Description | |------|--------------------------------------------------| | | content slot. example: <span>“If a man does not have sauce, then he is lost.</span><span> But the same man can get lost in the sauce.”</span><br><b>--Gucci Mane </b>' |

CSS Custom Properties

| Property | Description | |------------------------------|--------------------------------| | --fc-message-background | default: rgba(0, 0, 0, 0.05) | | --fc-message-border | default: 1px solid gold | | --fc-message-border-radius | default: 4px example: 5px | | --fc-message-color | default: rgba(0, 0, 0, 0.65) | | --fc-message-font-size | default: 12px example: 3px | | --fc-message-height | default: 18px | | --fc-message-padding | default: 0px | | --fc-message-text-align | example: right |