Wondering what’s next for npm?Check out our public roadmap! »

    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;
     

    Keywords

    none

    Install

    npm i cf-component-card

    DownloadsWeekly Downloads

    2

    Version

    5.0.0

    License

    BSD-3-Clause

    Unpacked Size

    72.8 kB

    Total Files

    50

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar