Cards

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

Card

JSX Declaration

<Card>
  <Image
    styleName="medium-wide"
      source={{uri: 'https://myark.github.io/shoutem-cn/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://myark.github.io/shoutem-cn/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>Dec 21, 13:45</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://myark.github.io/shoutem-cn/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>

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