Customise Ionic Cards

Ionic Framework ionic-v3
1

Hello,

I’m a beginner in Ionic, and I want to make cards like in the screen using juste ionic. Because in the screen its images and I made them with photoshop… is it possible to make something like this with ion-cards ?

Best Regards,

31855566_10216216285745740_428149565862969344_n

2

Yes, just place your cards in a grid.

See:

1 Like
3

@robinyo’s suggestion of grids is the easiest and best for someone new to Ionic.

If & when you want to customize your layout based on the end-user’s screen size (ie: to have a different layout for phones vs tablets vs landscaped tablets vs laptops, etc), look into CSS for responsive layouts.

Your *.scss file will look like this:

    @include max-width(1100px) {
        .myCard {
            flex-basis: 50%;      // medium screens get 2 columns (50% row allocation)
    		//background-color: green;
    	}
    }

    @include max-width(600px) {
        .myCard {
            flex-basis: 100%;              // small screens get 1 column (100% row allocation)
            //background-color: blue;
        }
    }

Good luck,
Ryan

1 Like
4

Hello,

you can also use ordinary div. Div with rounded corners, background color and icons exported from ilustrator as svg. Take care of export settings and it scales fluent.

For layout of your divs you can use grid, flexbox, div tables , etc. No need for ionic stuff.

Bset regards, anna-liebt.

1 Like
5

Hello, thank for all of you I resolved the problem =)