@lightspeed/cirrus-card

6.0.0-beta.1 • Public • Published

Card

Cards shape our interfaces into easily readable screens.

Installation

  1. Since we use peer dependencies to minimize library duplication, ensure you have the following dependencies loaded within your project
yarn add @lightspeed/cirrus-tokens emotion@9 react-emotion@9 styled-system@3 polished@2
  1. Install the component library
yarn add @lightspeed/cirrus-card
  1. Hook the <ThemeProvider> and the theme in your app.
// 1. Import the theme provider from emotion-theming
//    This is needed to forward all our tokens to the components
import { ThemeProvider } from 'emotion-theming';

// 2. Import the base theme from cirrus-tokens
//    There's nothing magical about this file. it's literally
//    a plain old javascript object with keys and values that
//    map to the tokens/design-system
import cirrusTheme from '@lightspeed/cirrus-tokens/theme/default';

/* Within your root app component */
class App extends React.Component {
  render() {
    return (
      {/*
        3. Wrap the children with ThemeProvider and pass in
        the cirrus theme into the theme prop.
      */}
      <ThemeProvider theme={cirrusTheme}>
        {/* Whatever children */ }
      </ThemeProvider>
    );
  }
}
  1. Import { Card } and use right away!

React Component

<Card>

Note: This components supports all space properties from styled-system

Prop Type Description
top Boolean Top card variant
color String Set the text color within the card
bg String Set the background color within the card
large boolean Forcebly set all children to have large spacing
noSpacing boolean Forcebly set all children to have noSpacing

<CardSection>

Note: This components supports all space properties from styled-system

Prop Type Description
children React.ReactNode The content to display inside the section
color String Set the text color within the card
bg String Set the background color within the card
large boolean Make the corresponding component have larger spacing
noSpacing boolean Make the corresponding component remove any spacing

<CardHeader>

Extends CardSection

Prop Type Description
title String Title for the card
actions React.ReactNode The action content (such as action buttons)
children React.ReactNode The content to display inside the header

<CardFooter>

Extends CardSection

<CardDivider>

Use this component to add a small divider between various sections.

Example

import React from 'react';
import { Card CardHeader, CardSection, CardFooter, CardDivider } from '@lightspeed/cirrus-card';

const MyComponent = () => (
  <Card>
    <CardHeader title="Card Title" />
    <CardSection>Card Content</CardSection>
    <CardDivider />
    <CardSection>Card Content</CardSection>
    <CardFooter>Card Footer</CardFooter>
  </Card>
);

export default MyComponent;

Readme

Keywords

none

Package Sidebar

Install

npm i @lightspeed/cirrus-card

Weekly Downloads

8

Version

6.0.0-beta.1

License

MIT

Unpacked Size

51.1 kB

Total Files

13

Last publish

Collaborators

  • kurt.bergeron
  • lightspeedhq
  • ls-guillaume-lambert
  • ls-frederic-bouchard
  • anomen