@forter/layout NPM

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`