Warning: session_start(): open(/var/lib/php/fpm/session/sess_80p5rfodbriiu742o74mo0epst, O_RDWR) failed: No such file or directory (2) in /var/www/acc01/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Warning: session_start(): Failed to read session data: files (path: /var/lib/php/fpm/session) in /var/www/acc01/wp-content/plugins/wordpress-social-login/wp-social-login.php on line 64

Notice: Undefined index: HTTP_REFERER in /var/www/acc01/wp-content/themes/mdbootstrap4/inc/cookie-setter.php on line 8
Angular Mobile Cards - Bootstrap 4 & Material Design. - Material Design for Bootstrap

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

        <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.`;
        }
      


Image card

Use the imageBackground input to create card with image overlay

Android
Android cards
iOS
iOS cards

        <StackLayout style="width: 90%">
          <mdb-card class="card-image"
                    imageBackground="url('https://mdbootstrap.com/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
Android cards
iOS
iOS cards

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

        <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.`;
        }
      

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'

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"