@slup/card v0.5.1

This package contains the Card, a Material Design Component which is part of a bigger ecosystem called Slup

Description

From Google's Material Design guidelines:

Installation

This package can be installed with NPM

npm install --save @slup/card

Usage

import { Card }  from '@slup/card'

export const Test = props =>
  <Card>
    <YourContent>
  </Card>

We decided that making children components for this package wasn't needed since they are simple containers with some basic styling: the main problem is that they have too many little variations in styles and they can't be changed based on a solid criterion. This isn't a big deal though, as shown in this full example, they can be created and used easily.

import styled         from '@slup/theming'
import { Card }       from '@slup/card'
import { Typography } from '@slup/typography'
import { FlatButton } from '@slup/buttons'

const CardHeader = styled.div`
  padding: 24px 16px 16px 16px;
  
  p:first-child {
    padding-bottom: 16px;
  }

  p:last-child {
    font-size: 14px;
  }
`

const CardActions = styled.div`
  padding: 8px;

  button {
    padding: 0;
    margin: 0 8px 0 0;
  }
`

export const Test = props =>
  <Card style="width: 380px">
    <CardHeader>
      <Typography headline>Title goes here</Typography>
      <Typography caption>Subtitle here</Typography>
    </CardHeader>
    <CardActions>
      <FlatButton>Action</FlatButton>
      <FlatButton>Action</FlatButton>
    </CardActions>
  </Card>

Available properties

Property: 'raised'

This property will increase the shadow of the Card

<Card raised />

Property: 'hoverable'

This property will increase the shadow of the Card only when the cursor is over it

<Card hoverable />