This package has been deprecated

Author message:

This package has been deprecated. Please find this package under its new name @cloudflare/component-card.

cf-component-card

5.0.0 • Public • Published

cf-component-card

Cloudflare Card Component

Installation

Installation with yarn is recommended

 
$ yarn add cf-component-card
 

Usage

import React from 'react';
import {
  Card,
  CardBlock,
  CardContent,
  CardControl,
  CardDrawers,
  CardMessages,
  CardSection,
  CardTitle,
  CardFooter,
  CardToolbar,
  CardToolbarLink
} from 'cf-component-card';
import { Button } from 'cf-component-button';
 
class CardComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeDrawer: null
    };
  }
 
  render() {
    return (
      <Card>
        <CardSection>
          <CardContent>
            <CardTitle>Hello World</CardTitle>
            <p>Here is some content.</p>
            <CardMessages
              messages={[
                { type: 'info', content: 'Info Message' },
                { type: 'error', content: 'Error Message' }
              ]}
            />
            <CardFooter>This is a footer message</CardFooter>
          </CardContent>
          <CardControl>
            <CardBlock>This is a block</CardBlock>
            <CardBlock>
              <Button type="default" onClick={() => {}}>
                Example Control
              </Button>
            </CardBlock>
          </CardControl>
        </CardSection>
        <CardDrawers
          drawers={[
            {
              id: 'one',
              name: 'One',
              content: <p>One</p>
            },
            {
              id: 'two',
              name: 'Two',
              content: <p>Two</p>
            }
          ]}
        />
        <CardToolbar
          controls={[]}
          links={[
            <CardToolbarLink
              key="ToolBarLink"
              expandable={false}
              isActive={false}
              onClick={() =>
                window.open('https://en.wikipedia.org/wiki/Main_Page')
              }
            >
              Wikipedia
            </CardToolbarLink>
          ]}
        />
      </Card>
    );
  }
}
 
export default CardComponent;
 

Readme

Keywords

none

Package Sidebar

Install

npm i cf-component-card

Weekly Downloads

2

Version

5.0.0

License

BSD-3-Clause

Unpacked Size

72.8 kB

Total Files

50

Last publish

Collaborators

  • lerwincf
  • lbarthonet
  • cf-media-manager
  • jacobbednarz
  • celso
  • cf-radar
  • dash_service_account
  • g4brym
  • snigdha34
  • wrangler-publisher
  • marksteyn
  • chiminator
  • sgoodhew_cf
  • terinjokes
  • third774
  • jsteinberger
  • jasnell
  • asapzacy
  • pcostanzo
  • gregbrimble
  • geelen
  • rexscaria
  • dcruz_cf
  • xuranwang
  • jculvey
  • sejoker
  • vasturiano
  • cf-ci-write
  • segments-write
  • thibmeu
  • xortive
  • gurjinder
  • cf-ci2
  • lvalenta
  • worenga