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(--ftr-grey), example: gold
--fc-card-padding	padding. example: 50px, default: 30px
--fc-card-shadow-color	shadow color. default: var(--ftr-gray-2), 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(--ftr-success-1); color: var(--ftr-success-1);">0</div>
      <div style="background-color: var(--ftr-primary-2);color: var(--ftr-success-2);">0</div>
      <div style="background-color: var(--ftr-primary-3);color: var(--ftr-success-3);">0</div>
      <div style="background-color: var(--ftr-primary-4);color: var(--ftr-success-4);">0</div>
      <div style="background-color: var(--ftr-primary-5);color: var(--ftr-success-5);">0</div>
      <div style="background-color: var(--ftr-primary-6);color: var(--ftr-success-6);">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