Use ion-col inside ion-card

[koffisani]

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 ?

[robinyo]

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

[koffisani]

Thanks, @robinyo. I want something like in this picture

Hope it’ll clarify more my intentions.

[robinyo]

See:

• https://ionicframework.com/docs/api/components/grid/Grid/
• http://masteringionic.com/blog/2017-10-29-using-css-grid-layout-with-ionic/

[koffisani]

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