Use ion-col inside ion-card


#1

I’m trying to create a card that’ll contain an image and a text. I would to have the image in a column on the left and the text on the left.
I think ion-col can help, but unfortunately, cannot find a way to do this. My basic code is as follows :

<ion-card>
        <img src="assets/imgs/logo.png" />
        <ion-card-content>
          <ion-card-title>
            {{ ets.nom}}
          </ion-card-title>
          <p>
            {{ ets.description}}
          </p>
        </ion-card-content>

Does anybody have an idea of how ?


#2

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:


#3

Thanks, @robinyo. I want something like in this picture
Screenshot-2018-5-5%20Bienvenue%20sur%20GabWays
Hope it’ll clarify more my intentions.


#4

See:


#5

Thank you. I’ve used div and CSS classes to solve it.