Cards

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

Card grid item example

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

Card grid item example

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

Card grid item + Icon example

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)

Card grid item + Icon (Shop) example

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>