Needlessly Promiscuous, Modularize!

    @forter/layout

    5.5.4 • Public • Published

    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

    Install

    npm i @forter/layout

    DownloadsWeekly Downloads

    566

    Version

    5.5.4

    License

    Apache-2.0

    Unpacked Size

    133 kB

    Total Files

    121

    Last publish

    Collaborators

    • forter-npm
    • lirown
    • oweingart