How to create a layout like this


#1

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.


#2

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


#3

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


#4

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.