React Mobile Cards
React Mobile Cards - Bootstrap 4 & Material Design
React Mobile cards are components which display content build of different elements with characteristic shadows, depth and hover effects.
It is hard to think of a better way of displaying your content to users other than by cards. Some of the biggest players like Facebook or Google are well aware of that, as you might have noticed in almost all their products.
Cards provide you with clarity, clean content categorisation and attractive form of presenting it to the users.
Basic examples
React Mobile Buttons includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.


<script>
import React, { Component } from "react";
import { View, ScrollView } from "react-native";
import { MDBCardBody, MDBCardTitle, MDBCard, MDBImage, MDBButton } from 'mdbreact-mobile';
export default class CardPage extends Component {
render() {
return (
<ScrollView>
<View>
<MDBCard>
<MDBImage styleName="cardTop" source={{ uri: "https://mdbootstrap.com/img/Photos/Others/images/43.jpg" }} />
<MDBCardBody>
<CardTitle> Example Card </CardTitle>
<MDBCardTitle>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem distinctio, dolor doloremque ex
expedita explicabo id illo in maxime nihil numquam, officia pariatur porro quia quidem quis, vel
voluptas.
</MDBCardTitle>
<MDBButton color="primary" title="Text"></MDBButton>
</MDBCardBody>
</MDBCard>
</View>
</ScrollView>
);
}
}
</script>
Cards - API
In this section you will find advanced information about the Cards component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.
Import statement
import { MDBCardBody, MDBCardTitle, MDBCard } from 'mdbreact-mobile'
API Reference: Properties
Name | Type | Default | Description | Example |
---|---|---|---|---|
children |
any | '' |
You can put everything and il will be rendering. | <MDBCard/> |