@jouwomgeving/ui-card

Dictator package JO ui card

Stats

StarsIssuesVersionUpdatedCreatedSize
@jouwomgeving/ui-card
1.4.11a year ago5 years agoMinified + gzip package size for @jouwomgeving/ui-card in KB

Readme

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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.