How to create a layout like this

i am trying to achieve this layout as ion-card

the part where i am struggling is the lower part below the separator. what component should i use which gives me appearance like this?

using ion-item with ion-item-group gives too much of white space between the columns.

You don’t have to use specific ionic components, you could simply use a table to display the text with the first column having the text right aligned and the second column having the text left aligned.

Heres a basic example on codepen using bootstrap for the colours: https://codepen.io/anon/pen/yXXJMQ

where are these class text-muted etc defined? i see the codepen looks as i expected. however my ionic2/angular2 seems to be ignoring those classes

They are just bootstrap classes. You could simply add your own for the red text etc… Without bootstrap added ionic would ignore those classes. I wouldn’t recommend adding bootstrap either. Just use your own classes for coloring text.

1 Like