@forter/layout

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