@jouwomgeving/ui-card v3.0.1
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.
1 year ago
1 year ago
3 years ago
3 years ago
3 years ago
3 years ago
5 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago