Cards

Cards have become very popular in recent years. They are useful when displaying interactive content composed of different elements.

API

Props

• Card has no specific (custom) Props, however, it supports every prop that the standard React Native View component supports. For full list of available props, visit React Native View component documentation.

Style names

Card has no specific style names, however the View component nested under Card can use the following Style name:

• content: adds standard card margins to any child component

Examples

Card grid item

JSX Declaration

<Card>
  <Image
    styleName="medium-wide"
      source={{uri: 'https://shoutem.github.io/img/ui-toolkit/examples/image-10.png'}}
  />
  <View styleName="content">
    <Subtitle>Choosing The Right Boutique Hotel For You</Subtitle>
    <Caption>21 hours ago</Caption>
  </View>
</Card>

Card + Icon

JSX Declaration

<Card>
  <Image
    styleName="medium-wide"
    source={{uri: 'https://shoutem.github.io/img/ui-toolkit/examples/image-12.png'}}
  />
  <View styleName="content">
    <Subtitle>Choosing The Right Boutique Hotel For You</Subtitle>
    <View styleName="horizontal v-center space-between">
      <Caption>21 hours ago</Caption>
      <Button styleName="tight clear"><Icon name="add-event" /></Button>
    </View>
  </View>
</Card>

Card + Icon (Shop)

JSX Declaration

<Card>
  <Image
    styleName="medium-wide"
    source={{uri: 'https://shoutem.github.io/img/ui-toolkit/examples/image-11.png'}}
  />
  <View styleName="content">
    <Subtitle>Choosing The Right Boutique Hotel For You</Subtitle>
    <View styleName="horizontal v-center space-between">
      <View styleName="horizontal">
        <Subtitle styleName="md-gutter-right">$99.99</Subtitle>
        <Caption styleName="line-through">$120.00</Caption>
      </View>
      <Button styleName="tight clear"><Icon name="cart" /></Button>
    </View>
  </View>
</Card>