0

I would like to wrap body of text on the right side of my header What would be the best way to do this using md-card in AngularJS?

<div class="row">
    <md-card style="text-wrap:none">
        <span style="flex-wrap:wrap">
            <md-card-header style="background-color: dodgerblue; font-size:15px;font-weight:600; color: white; height:75px;width:100px;">
                Did You Know?

            </md-card-header>

            <md-card-header-text>
                Kobe Bryant won 5 Championships with the Los Angeles Lakers
            </md-card-header-text>
        </span>
    </md-card>
</div>

The above produces: enter image description here

georgeawg
  • 48,608
  • 13
  • 72
  • 95
AngularJSDev
  • 37
  • 4

1 Answers1

0
<div class="row">
    <md-card style="text-wrap:none"  layout-align="center center">
        <div style="height:75px;width:100px; background-color: dodgerblue;">
            <md-card-header  style="font-size:15px;font-weight:600; color: white; ">
                Did You Know?
            </md-card-header>

        </div>
        <div>  
              <md-card-header-text>
                Kobe Bryant won 5 Championships with the Los Angeles Lakers
              </md-card-header-text>
        </div>


    </md-card>
</div>

and set the padding to the header text

https://plnkr.co/edit/D7Dvn3MklSjkPffeNpsK?p=preview

Shyamal Patel
  • 43
  • 7