fc-card

a container to populate visuals and present in a clean nice way.

Usage

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

<fc-card></fc-card>

Examples

<!-- invalid -->
<fc-card size="invalid"></fc-card>

Properties

| Property | Attribute | Type | Default | Description | |----------|-----------|--------------------------------------------------|-----------|---------------------------------------------| | flat | flat | boolean | false | Whether the card is in flattern style | | intent | intent | "warn" \| "success" \| "danger" \| "cancel" \| "primary" \| "secondary" | "default" | intent color to emphasize the type of alert | | size | | "no" \| "small" \| "medium" \| "large" | | |

Slots

| Name | Description | |------|--------------------------------------------| | | card content. example: <div> Card </div> |

CSS Custom Properties

| Property | Description | |--------------------------------|--------------------------------------------------| | --fc-card-hover-shadow-color | hover shadow color. default: var(--fc-grey-100), example: gold | | --fc-card-padding | padding. example: 50px, default: 30px | | --fc-card-shadow-color | shadow color. default: var(--fc-gray-200), example: gold |

fc-header

Usage

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

<fc-header>
   <div>My header</div>
</fc-header>

Examples

<!-- logoExample -->
<fc-header>
   <fc-icon slot="logo" icon="admin"></fc-icon>
   <div> Logo.... and header!</div>
</fc-header>`

Properties

| Property | Attribute | Type | |-----------|-----------|-----------| | hasLogo | hasLogo | boolean |

Slots

| Name | Description | |--------|--------------------------------------------------| | | content slot | | logo | logo slotted. example: <fc-icon slot="logo" icon="admin"></fc-icon> |

CSS Custom Properties

| Property | Description | |---------------------------------|----------------------------------| | --fc-header-height | default: 64px | | --fc-header-justify-content | default: center | | --fc-header-logo-border-color | default: var(--ftr-cyan) | | --fc-header-padding | default: 0 16px | | --fc-header-shadow-color | default: var(--ftr-gray-light) |

fc-layout

** An element by Forter

Usage

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

    <fc-layout columns=2 rows=3>
      <div row-start=1 row-end=3 column-start=1 column-end=3 style="background-color: var(--fc-success-100); color: var(--fc-success-100);">0</div>
      <div style="background-color: var(--fc-primary-200);color: var(--fc-success-200);">0</div>
      <div style="background-color: var(--fc-primary-300);color: var(--fc-success-300);">0</div>
      <div style="background-color: var(--fc-primary-400);color: var(--fc-success-400);">0</div>
      <div style="background-color: var(--fc-primary-500);color: var(--fc-success-500);">0</div>
      <div style="background-color: var(--fc-primary-600);color: var(--fc-success-600);">0</div>
    </fc-layout>

Properties

| Property | Attribute | Type | Default | Description | |--------------|--------------|----------|---------|-------------------| | columns | columns | number | 1 | number of columns | | flowColumn | flowColumn | string | false | grid gap | | gap | gap | string | "" | grid gap | | rows | rows | number | 1 | number of rows |

Slots

| Name | |------| | |

fc-separator

a line that separates different contents.

Usage

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

<fc-separator>
</fc-separator>

Properties

| Property | Attribute | Type | Default | Description | |-------------|-------------|-----------------------------------|--------------|--------------------| | direction | direction | "horizontal" \| "vertical" | "horizontal" | presentation style | | type | type | "solid" \| "dashed" \| "double" | "solid" | style type |

Slots

| Name | Description | |------|--------------------------------------------------| | | default using it for title. Title: <b>Title</b> Mark: <b>#</b> |

CSS Custom Properties

| Property | Description | |--------------------------------|--------------------------------| | --fc-separator-height | default: 100% | | --fc-separator-margin-bottom | margin bottom. default: 10px | | --fc-separator-margin-top | margin top. default: 10px |