Card

Cards contain content and actions about a single subject. - Material Docs

import { Card } from 'material-bread';

Cards can be built using CardHeader , CardMedia , CardContent , CardActions , or custom components. Please see each Card Component page to learn how to use them.

Jon Snow

Knows Nothing, KingofDaNorth



Ran out of bleach for beard, but Daenerys says it looks cool.





Live Editing

<View style={{flexDirection: 'row', alignItems: 'center'}}>
  <Card style={{maxWidth: 400, width: '100%'}}>
    <CardHeader
        thumbnail={
            <Avatar 
                type="image" 
                image={<Image source={{uri: 'https://www.hbo.com/content/dam/hbodata/series/game-of-thrones/character/s5/john-snow-1920.jpg/_jcr_content/renditions/cq5dam.web.1200.675.jpeg'}} /> } 
                size={40}
            />
        }
        title={'Jon Snow'}
        subtitle={'Knows Nothing, KingofDaNorth'}
        action={<IconButton name="more-vert" size={24} />}
    />
    <CardMedia
        image={
            <Image
                style={{ flex: 1, width: '100%' }}
                source={{uri: 'https://i.redd.it/zj9vfr7uuljz.png'}}
                resizeMode="cover"
            />
        }
    />
    <CardContent >
      <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>
        Ran out of bleach for beard, but Daenerys says it looks cool.
      </Text>
    </CardContent>
    <CardActions
      rightActionItems={[
        {name: 'thumb-up',},
        {name: 'share'} 
      ]}
    />
  </Card>
</View>

import React, { Component } from 'react';
import { Card, CardMedia, CardContent, CardActions, } from 'material-bread';

export default class FullCard extends Component {
  render() {
    return (
      <Card>
        <CardMedia
          image={
            <Image
              style={{ flex: 1, width: '100%' }}
              source={{uri: 'https://images.pexels.com/photos/955463/pexels-photo-955463.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=800'}}
              resizeMode="cover"
            />
          }
        />
        <CardContent>
          <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>
            This is some test card content, though it can anything.
          </Text>
        </CardContent>
        <CardActions
          leftActionItems={[
            {name: 'share',},
            {name: 'learn more'}
          ]}
        />
    </Card>
    );
  }
}

Name

Description

Type

Default

onPress

Call back when card is pressed, adds ripple to whole component

func

outlined

Adds a hairlineWidth border around card

bool

radius

Border radius of card

number

rippleProps

Object is spread to Ripple Component

object

shadow

Adds shadow for all platforms

number

style

Styles root element

object

You can see even more examples in the Storybook environment.

You can wrap any component with a Ripple to make it clickable.

Gorilla

Gorillas are ground-dwelling, predominantly herbivorous apes that inhabit the forests of central Sub-Saharan Africa.

LEARN MORE

Live Editing

<View style={{flexDirection: 'row', alignItems: 'center'}}>
  <Card style={{maxWidth: 400, width: '100%'}}>
    <Ripple onPress={() => console.log('pressed action')}>
      <CardMedia
        image={
          <Image
            style={{ flex: 1, width: '100%' }}
            source={{uri: 'https://images.pexels.com/photos/39571/gorilla-silverback-animal-silvery-grey-39571.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'}}
            resizeMode="cover"
          />
        }
      />
      <CardContent >
        <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 16, fontWeight: '600', marginBottom: 6 }}>
          Gorilla
        </Text>
        <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>
          Gorillas are ground-dwelling, predominantly herbivorous apes that inhabit the forests of central Sub-Saharan Africa.
        </Text>
      </CardContent>
    </Ripple>
    <CardActions
      leftActionItems={[
        {name: 'share',},
        {name: 'learn more'}
      ]}
    />
  </Card>
</View>

Adding onPress will make the entire card clickable, useful when cards act as links or actions.

Gorilla

Gorillas are ground-dwelling, predominantly herbivorous apes that inhabit the forests of central Sub-Saharan Africa.

Dog

The domestic dog is a member of the genus Canis (canines), which forms part of the wolf-like canids, and is the most widely abundant terrestrial carnivore.

Live Editing

<View style={{flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap'}}>
  <Card style={{maxWidth: 300, width: '100%', marginRight: 24}} onPress={() => console.log('clicked gorilla')}>
    <CardMedia
      image={
        <Image
          style={{ flex: 1, width: '100%' }}
          source={{uri: 'https://images.pexels.com/photos/39571/gorilla-silverback-animal-silvery-grey-39571.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'}}
          resizeMode="cover"
        />
      }
    />
    <CardContent >
      <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 16, fontWeight: '600', marginBottom: 6 }}>
        Gorilla
      </Text>
      <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>
        Gorillas are ground-dwelling, predominantly herbivorous apes that inhabit the forests of central Sub-Saharan Africa.
      </Text>
    </CardContent>
  </Card>

  <Card style={{maxWidth: 300, width: '100%'}} onPress={() => console.log('clicked dog')}>
    <CardMedia
      image={
        <Image
          style={{ flex: 1, width: '100%' }}
          source={{uri: 'https://images.pexels.com/photos/955463/pexels-photo-955463.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=800'}}
          resizeMode="cover"
        />
      }
    />
    <CardContent >
      <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 16, fontWeight: '600', marginBottom: 6 }}>
        Dog
      </Text>
      <Text style={{ color: 'rgba(0,0,0,.6)', fontSize: 14 }}>
        The domestic dog is a member of the genus Canis (canines), which forms part of the wolf-like canids, and is the most widely abundant terrestrial carnivore.
      </Text>
    </CardContent>
  </Card>
</View>

Card

Component #

Usage #

Props #

Demos #

Action Media #

Clickable #