Edit these docs

Angular Mobile Cards

Angular Mobile Cards - Bootstrap 4 & Material Design

Cards are the basic building block for each application. Use them in the Material Design version on both platforms!

Basic example

Each mdb-card component must have his own separate wrapper - StackLayout.

Android

iOS

HTML
TS


        <StackLayout style="width: 90%">
          <mdb-card style="">
            <FlexboxLayout flexDirection="column" alignItems="flex-start">
              <StackLayout>
                <Image mdbWavesEffect class="card-image-top"
                       src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).jpg"></Image>
              </StackLayout>
              <StackLayout>
                <mdb-card-body>
                  <mdb-card-title text="Basic example"></mdb-card-title>
                  <mdb-card-text [text]="loremIpsumText"></mdb-card-text>

                  <FlexboxLayout>
                    <Label class="card-link" mdbWavesEffect text="Card link"></Label>
                    <Label class="card-link" text="Another Card link" style="margin-left: 10"
                           mdbWavesEffect></Label>
                  </FlexboxLayout>

                </mdb-card-body>
              </StackLayout>
            </FlexboxLayout>
          </mdb-card>
        </StackLayout>


        import {Component} from '@angular/core';

        @Component({
          selector: 'App',
          moduleId: module.id,
          templateUrl: './app.component.html',
        })
        export class AppComponent {
          loremIpsumText = `Some quick example text to build on the panel title and make up the bulk of the panel's content.`;
        }

Card with footer

Use mdb-card-footer to add good-looking footer to the card element

Android

iOS

HTML
TS


        <StackLayout style="width: 90%">
          <mdb-card>
            <FlexboxLayout flexDirection="column" alignItems="flex-start">
              <StackLayout>
                <Image mdbWavesEffect class="card-image-top"
                       src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).jpg"></Image>
              </StackLayout>

              <StackLayout>
                <mdb-card-body>
                  <mdb-card-title text="Card with footer"></mdb-card-title>
                  <mdb-card-text [text]="loremIpsumText"></mdb-card-text>

                  <FlexboxLayout>
                    <Label class="card-link" mdbWavesEffect text="Card link"></Label>
                    <Label class="card-link" text="Another Card link" style="margin-left: 10"
                           mdbWavesEffect></Label>
                  </FlexboxLayout>
                </mdb-card-body>
              </StackLayout>

              <mdb-card-footer class="text-center">
                <Label text="2 days ago"></Label>
              </mdb-card-footer>

            </FlexboxLayout>
          </mdb-card>
        </StackLayout>


        import {Component} from '@angular/core';

        @Component({
          selector: 'App',
          moduleId: module.id,
          templateUrl: './app.component.html',
        })
        export class AppComponent {
          loremIpsumText = `Some quick example text to build on the panel title and make up the bulk of the panel's content.`;
        }

Image card

Use the imageBackground input to create card with image overlay

Android

iOS

HTML
TS


        <StackLayout style="width: 90%">
          <mdb-card class="card-image"
                    imageBackground="url('https://mdbcdn.b-cdn.net/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg')">

            <StackLayout style="background-color: rgba(0, 0, 0, 0.5)" class="card-image-overlay">
              <mdb-card-body dark="true" style="text-align: center; color: white">
                <Label class="card-title" text="Image Overlay card"></Label>
                <Label class="card-text" [text]="loremIpsumText" textWrap="true"></Label>

                <FlexboxLayout justifyContent="center">
                  <Label class="card-link" mdbWavesEffect text="Card link"></Label>
                  <Label class="card-link" text="Another Card link" style="margin-left: 10"
                         mdbWavesEffect></Label>
                </FlexboxLayout>
              </mdb-card-body>
            </StackLayout>

          </mdb-card>
        </StackLayout>


        import {Component} from '@angular/core';

        @Component({
          selector: 'App',
          moduleId: module.id,
          templateUrl: './app.component.html',
        })
        export class AppComponent {
          loremIpsumText = `Some quick example text to build on the panel title and make up the bulk of the panel's content.`;
        }

Light card

Create light & dark app layouts using light and dark cards

Android

iOS

HTML
TS


        <StackLayout style="margin-top: 10">
          <mdb-card style="">
            <FlexboxLayout flexDirection="column" alignItems="flex-start">
              <StackLayout>
                <Image mdbWavesEffect class="card-image-top"
                       src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%28131%29.jpg"></Image>
              </StackLayout>

              <StackLayout>
                <mdb-card-body>
                  <mdb-card-title text="Light version"></mdb-card-title>

                  <StackLayout class="hr-light" style="margin-bottom: 8;"></StackLayout>

                  <mdb-card-text [text]="loremIpsumText"></mdb-card-text>


                  <FlexboxLayout justifyContent="flex-end">
                    <Label class="card-link" text="Read more" mdbWavesEffect></Label>
                  </FlexboxLayout>
                </mdb-card-body>
              </StackLayout>

            </FlexboxLayout>

          </mdb-card>
        </StackLayout>


        import {Component} from '@angular/core';

        @Component({
          selector: 'App',
          moduleId: module.id,
          templateUrl: './app.component.html',
        })
        export class AppComponent {
          loremIpsumText = `Some quick example text to build on the panel title and make up the bulk of the panel's content.`;
        }

Dark card

Use the dark input to switch card to dark mode (black background with white fonts)

Android

iOS

HTML
TS


        <StackLayout>
          <mdb-card style="">
            <FlexboxLayout flexDirection="column" alignItems="flex-start">
              <StackLayout>
                <Image mdbWavesEffect class="card-image-top"
                       src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%28131%29.jpg"></Image>
              </StackLayout>

              <StackLayout>
                <mdb-card-body dark="true">
                  <mdb-card-title text="Light version"></mdb-card-title>

                  <StackLayout class="hr-light" style="margin-bottom: 8;"></StackLayout>

                  <mdb-card-text [text]="loremIpsumText"></mdb-card-text>


                  <FlexboxLayout justifyContent="flex-end">
                    <Label class="card-link" text="Read more" mdbWavesEffect></Label>
                  </FlexboxLayout>
                </mdb-card-body>
              </StackLayout>

            </FlexboxLayout>

          </mdb-card>
        </StackLayout>


        import {Component} from '@angular/core';

        @Component({
          selector: 'App',
          moduleId: module.id,
          templateUrl: './app.component.html',
        })
        export class AppComponent {
         loremIpsumText = `Some quick example text to build on the panel title and make up the bulk of the panel's content.`;
        }

Edit these docs

Angular Mobile Cards - API

In this section you will find informations about cards and its required modules and available inputs, outputs, methods and events.

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular Mobile library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.


    // MDB Angular Mobile Free
    import { MdbCardModule } from 'mdb-angular-mobile'

Import example Modules list

Components

MdbCard

Selector: MDBCard

Type: MdbCardComponent

MdbCardBody

Selector: MDBCardBody

Type: MdbCardBodyComponent

MdbCardFooter

Selector: MDBCardFooter

Type: MdbCardFooterComponent

MdbCardHeader

Selector: MDBCardHeader

Type: MdbCardHeaderComponent

MdbCardText

Selector: MDBCardText

Type: MdbCardTextComponent

MdbCardTitle

Selector: MDBCardTitle

Type: MdbCardTitleComponent

Inputs

MdbCardComponent

Name	Type	Default	Description	Example
`shadowLevel`	number	2	Allow to modify shadow (elevation) level. Correct values are from 0 to 24.	`shadowLevel="4"`
`imageBackground`	string	' '	Allow to add a image overlay to the card.	`imageBackground="https://link-to-image"`

MdbCardBodyComponent

Name	Type	Default	Description	Example
`dark`	boolean	false	Allow to invert colors for the card - black background and white text.	`dark="true"`

MdbCardTextComponent

Name	Type	Default	Description	Example
`text`	string	' '	Allow put text inside the component.	`text="Sample text"`

MdbCardTitleComponent

Name	Type	Default	Description	Example
`text`	string	' '	Allow put title text inside the component.	`text="Sample title"`

Service	Why?	Agreement
Essential cookies	These cookies are strictly necessary to provide you with services available through our websites and to use some of its features, such as access to secure areas. Because these cookies are strictly necessary to deliver the websites, you cannot refuse them without impacting how our websites function. You can block or delete them by changing your browser settings.	No Yes
Functional	These cookies are used to enhance the performance and functionality of our websites but are non-essential to their use. However, without these cookies, certain functionality may become unavailable. These cookies are served by brandflow.net.	No Yes
Google AdWords	These cookies are used to make advertising via Google AdWords messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.	No Yes
Facebook Pixel	These cookies are used to make advertising Facebook messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.	No Yes