STYLED MDL

Cards

Self-contained pieces of paper with data.

Wide Card

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
/*--- Wide Card ---*/
const DemoCardWide = Card.extend`
  ${shadow2dp()}
  width: 512px;
`;

const DemoCardTitle = CardTitle.extend`
  color: #fff;
  height: 176px;
  background: url('https://getmdl.io/assets/demos/welcome_card.jpg') center / cover;
`;

const DemoCardMenu = CardMenu.extend`
  color: #fff;
`;

// Somewhere in a render
<DemoCardWide>
  <DemoCardTitle>
    <CardTitleText>
      Welcome
    </CardTitleText>
  </DemoCardTitle>
  <CardSupportingText>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Mauris sagittis pellentesque lacus eleifend lacinia...
  </CardSupportingText>
  <CardActions border>
    <Button colored>
      Get Started
    </Button>
  </CardActions>
  <DemoCardMenu>
    <Button icon>
      <MdShare />
    </Button>
  </DemoCardMenu>
</DemoCardWide>

Square Card

Update

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.
/*--- Square Card ---*/
const DemoCardSquare = Card.extend`
  ${shadow2dp()}
  width: 320px;
  height: 320px;
`;

const DemoCardTitle = CardTitle.extend`
  color: #fff;
  height: 176px;
  background: url('https://getmdl.io/assets/demos/dog.png') bottom right 15% no-repeat #46B6AC;
`;

// Somewhere in a render
<DemoCardSquare>
  <DemoCardTitle expand>
    <CardTitleText>Update</CardTitleText>
  </DemoCardTitle>
  <CardSupportingText>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Aenan convallis.
  </CardSupportingText>
  <CardActions border>
    <Button colored>ViewUpdates</Button>
  </CardActions>
</DemoCardSquare>

Cards with Backgrounds

Image.jpg

Featured event:
May 24, 2016
7-11pm

event
/*--- Image Card ---*/
const ImageCard = Card.extend`
  ${shadow2dp()}
  width: 256px;
  height: 256px;
  background: url('https://getmdl.io/assets/demos/image_card.jpg') center / cover;
`;

const Footer = CardActions.extend`
  height: 52px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
`;

const Filename = styled.span`
  color: #fff;
  font-size: 14px;
  font-weight: 500;
`;

// Somewhere in a render
<ImageCard>
  <CardTitle expand />
  <Footer>
    <Filename>Image.jpg</Filename>
  </Footer>
</ImageCard>

/*--- Event Card ---*/
const EventCard = Card.extend`
  
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, ,function (p) {
    return p.theme[k];
  },),
                0 3px 1px -2px rgba(0, 0, 0, ,function (p) {
    return p.theme[k];
  },),
                0 1px 5px 0 rgba(0, 0, 0, ,function (p) {
    return p.theme[k];
  },);
   
  width: 256px;
  height: 256px;
  background: #3e4eb8;
  align-self: flex-start;
`

const EventInfo = CardTitleText.extend`
  margin-top: 0;
  align-self: flex-start;
  color: #fff;
  font-weight: normal;
  font-size: 24px;
  line-height: 32px;
`

const EventActions = CardActions.extend`
  border-color: rgba(255, 255, 255, 0.2);
  display: flex;
  box-sizing: border-box;
  align-items: center;
`

const EventIcon = Icon.extend`
  padding-right: 10px;
  color: #fff;
`

const WhiteButton = Button.extend`
  color: #fff;
`

const caption = 'Event Card'

// Somewhere in a render
<EventCard>
  <CardTitle expand>
    <EventInfo>
      Featured event:<br />
      May 24, 2016<br />
      7-11pm
    </EventInfo>
  </CardTitle>
  <EventActions border>
    <WhiteButton colored>Add to calenar</WhiteButton>
    <Spacer />
    <EventIcon />
  </EventActions>
</EventCard>

Usage

The Card component and its supporting child components only have a few configurable props. Create custom cards by extending their styles and composing the provided components in different ways.

<Card>

PropTypeDefaultDescription
expandbooleanfalseCauses the card to expand to fill its container

<CardActions>

PropTypeDefaultDescription
borderbooleanfalseAdds a border above the card actions

<CardMedia>

No Custom Props

<CardMenu>

No Custom Props

<CardSubtitleText>

No Custom Props

<CardTitle>

PropTypeDefaultDescription
borderbooleanfalseAdds a border below the card title
expandbooleanfalseCauses the title area to expand to fill the card

<CardTitleText>

No Custom Props