@jouwomgeving/ui-card

    1.4.11 • Public • Published

    Flex

    $ npm install @jouwomgeving/ui-card
    

    Usage

    import * as Icon from '@jouwomgeving/ui-icon';
    import * as Button from '@jouwomgeving/ui-form';
    import * as Card from '@jouwomgeving/ui-card';
    
    function Layout() {
      return (
        <Card.default>
          <Card.Header
            icon={(<Icon.SmashIcon.Mailbox />)}
            title="Berichten"
            actions={(<Button.default
              prefix={(<Icon.FontAwesome.FaEdit color="rgba(255, 255, 255, 0.8)" size={18} />)}
              label="Nieuw bericht"
            />)}
          />
          <Card.Delimiter />
          <Card.Row>
            <p>
              Nulla vitae elit libero, a pharetra augue.
              Nullam quis risus eget urna mollis ornare vel eu leo.
              Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum.
              Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
              Curabitur blandit tempus porttitor.
            </p>
            <p>
              Aenean lacinia bibendum nulla sed consectetur.
              Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
              Vestibulum id ligula porta felis euismod semper.
              Curabitur blandit tempus porttitor.
              Nullam id dolor id nibh ultricies vehicula ut id elit.
              Etiam porta sem malesuada magna mollis euismod.
            </p>
          </Card.Row>
        </Card.default>
      )
    }
    
    export default Layout

    Components

    Card

    About

    The basic wrapper for cards

    Properties

    Prop Values Default Required
    children ReactElement true

    Header

    About

    Card Header component

    Properties

    Prop Values Default Required
    children ReactElement true
    title String true
    subTitle String false
    actions ReactElement false

    Row

    About

    Useful for layout within a card this will add the right paddings for layouts.

    Properties

    Prop Values Default Required
    children ReactElement true

    Delimiter

    About

    Delimiter in the card component.

    Keywords

    none

    Install

    npm i @jouwomgeving/ui-card

    DownloadsWeekly Downloads

    11

    Version

    1.4.11

    License

    UNLICENSED

    Unpacked Size

    80.1 kB

    Total Files

    38

    Last publish

    Collaborators

    • marcelblijleven_avinty
    • ivanhulzen
    • dkainama
    • rvanleeuwen
    • heesink
    • hellobramkok
    • dbunskoek