web
mobile
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
Android cards
iOS
iOS cards

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