Use ion-col inside ion-card

An example:

<ion-card>

      <img src="{{ '../../assets/imgs/events/' + card.img }}"/>

      <div class="fab-container">
        <ion-fab bottom right edge>
          <button ion-fab mini color="light" (click)="goToEvent(card)">
            <ion-icon name="ios-open-outline"></ion-icon>
          </button>
        </ion-fab>
      </div>

      <ion-card-content>
        <ion-row no-padding>

          <ion-col col-3 text-center>
            <p class="month">
              {{ card.month }}
            </p>
            <p class="day">
              {{ card.day }}
            </p>
          </ion-col>
          <ion-col class="event-name">
            {{ card.name }}
            <p class="event-location">
              {{ card.location }}
            </p>
          </ion-col>

        </ion-row>
      </ion-card-content>

    </ion-card>

See:

• https://github.com/Robinyo/big-top
• https://github.com/Robinyo/big-top/blob/master/src/pages/events/events.html

events-page.jpg373x667 102 KB