Card

An all-around flexible and composable component

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

To use a Card component in your application, you need to import the BulmaCardModule by adding the following lines to your app.module.ts file.

import { BulmaCardModule } from 'ngx-bulma';

@NgModule({
  imports: [BulmaCardModule],
  // ...
})
export class AppModule {}

Basic Card Details

The most basic card needs only of <bu-card> element with some content. However, Bulma components provides a number of preset sections that you can use inside of <bu-card>

Components	Description
`<bu-card>`	Parent Card Component
`<bu-card-header>`	Card Header
`<bu-card-title>`	Card Title
`<bu-card-content>`	Primary card content
`<bu-card-footer>`	Section anchored to the bottom of the card

An example card is shown below:

Component

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive

<bu-card>
  <bu-card-header>
    <bu-card-title>Component</bu-card-title>
    <a href="#" class="card-header-icon" aria-label="more options">
      <span class="icon">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </a>
  </bu-card-header>
  <bu-card-content>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
      <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
      <br />
    </div>
  </bu-card-content>
  <bu-card-footer>
    <a href="#" class="card-footer-item">
      Save
    </a>
    <a href="#" class="card-footer-item">
      Edit
    </a>
    <a href="#" class="card-footer-item">
      Delete
    </a>
  </bu-card-footer>
</bu-card>

John Smith

@johnsmith

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. @bulmaio. #css #responsive
11:09 PM - 1 Jan 2016

<bu-card>
  <bu-card-image>
    <figure class="image is-4by3">
      <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image" />
    </figure>
  </bu-card-image>
  <bu-card-content>
    <div class="media">
      <div class="media-left">
        <figure class="image is-48x48">
          <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image" />
        </figure>
      </div>
      <div class="media-content">
        <p class="title is-4">John Smith</p>
        <p class="subtitle is-6">@johnsmith</p>
      </div>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
    <a>@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
    <br />
  </bu-card-content>
</bu-card>