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 component doesn’t have 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 component doesn’t have 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>