Edit these docs Rate these docs

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.

Android

iOS

script


        <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>

Introduction
Basic example

Edit these docs Rate these docs

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/>children</MDBCard>`

Import statement
Properties