@inthepocket/itp-rcc-card NPM

ITP Card component

Usage

$ npm install @inthepocket/itp-rcc-card

Import (Typescript)

import { default as Card } from '@inthepocket/itp-rcc-card';

Import (ES)

import Card from '@inthepocket/itp-rcc-card/dist/Card';

JSX

<Card size="default">
  <Card.Header>
    <h1>Card Header</h1>
  </Card.Header>
  <Card.Body>
    <h2>Card Body title</h2>
    <p>Card Body content</p>
  </Card.Body>
  <Card.Footer>
    <p>Card footer</p>
  </Card.Footer>
</Card>

Card.Header & Card.Footer are optional.

API documentation

Card

<Card size="default"></Card>

Property	Description	Type	Default	Required
href	Link url	string	-	No
prefixCss	Prefix for css classNames	string	'card'	No
size	default, small or large	string	'default'	No
styles	imported css module (if passed, prefixed classNames will be disabled), see styles property	object	null	No
type	primary, secondary or tertiary	string	'primary'	No
onClick		Function	-	No
target	Link target	string	-	No

Styles property

Property	Type	Default	Required
body	string	-	Yes
bodySizeLarge	string	-	No
bodySizeSmall	string	-	No
card	string	-	Yes
footer	string	-	No
footerSizeLarge	string	-	No
footerSizeSmall	string	-	No
header	string	-	No
headerSizeLarge	string	-	No
headerSizeSmall	string	-	No
link	string	-	No
typePrimary	string	-	No
typeSecondary	string	-	No
typeTertiary	string	-	No

The css module should look like this:

.card             { ... }
.header           { ... }
.headerSizeSmall  { ... }
.headerSizeLarge  { ... }
.body             { ... }
.bodySizeSmall    { ... }
.bodySizeLarge    { ... }
.footer           { ... }
.footerSizeSmall  { ... }
.footerSizeLarge  { ... }
.link             { ... }
.typePrimary      { ... }
.typeSecondary    { ... }
.typeTertiary     { ... }

Body

<Card size="default">
  <Card.Body>
    ...
  </Card.Body>
</Card>

Header

<Card size="default">
  <Card.Header>
    ...
  </Card.Header>
</Card>

Footer

<Card size="default">
  <Card.Footer>
    ...
  </Card.Footer>
</Card>

Development

Installation

$ npm install

Test

$ npm run test

Build

Compiles the TypeScript source to ES5.

$ npm run build

react itp

capitalize classnames react

@infinitebrahmanuniverse/nolb-_inth @everything-registry/sub-chunk-467 @zalastax/nolb-_inth

0.0.3

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago