How do you deal with div with mat-card-header-text in an material2 card?

Question

I can\'t seem to wrap my head around having this container in an md card.

In my material cards, I have this:

 &         


        
      

Answer 1

If you want to support both a version with image in the header and without, this is one possible solution. The idea is to toggle a class which fixes the margin when there is no image available (set through the link input in the example). This way to card looks fine with and without an image.

Html:

  
    {{content}}
    {{content}}
    
  
  
    {{content}}
  
  
    SHOW
  

Css

.fix-margin {
  margin: 0 -8px;
}

Ts

export class component {
  @Input() content;
  @Input() link;    
}