Ionic card

1

Hi,

I’ve seen on the official page an image with some ionic cards like in this image

image
Untitled.png1152×648 175 KB

How can I do this?

Thank you!

2

Actually, you can’t. I mean, not by the normal ways with Ionic, you would have to style your card with CSS. This card is from the App Ionic View.

3

Can somebody help me to do this please or a plunkr? I am confuse…I don’t know how to do it .

Thank you!

4

Try something like this:

style.css:
`.item-line-positive {
height: 8px !important;
width: 100%;
padding-top: 0;
padding-bottom: 0;
background-color: #4E8DFA;
}

.icon-bigger{
font-size: 2em;
}
.row-no-padding{
padding: 0 !important;
}`

Your page content:
<ion-content class="padding"> <div class="card"> <div class="item-line-positive"></div> <div class="item item-text-wrap"> <div class="row row-no-padding"> <div class="col col-90"> <h2 class="positive">My Product </h2 > </div> <div class="col col-10"> <i class="icon ion-ionic positive icon-bigger"></i> </div> </div> <p> Some content! </p> <p> Some other content! </p> </div> </div> </ion-content>

In the image you uploaded the icons have the stable color class and the text must have a different font-family, i used a color-picker to get the positive color HEX. I hope this helps you :slight_smile:

5

and sorry i haven’t used a plunkr :confused:

6

Thank you very much :slightly_smiling: