Угловой материал Дизайн макета, который обертывает содержимое

Question

Как достичь следующей компоновки (с значком «плюс» под макетом карты)? :

Я попытался следующий код:

<section layout="column" style="background-color: black;"> 

     <md-card flex="100"> 
      <md-card-header style="background-color: greenyellow; "> 
       <h2>Card headline</h2> 
      </md-card-header> 
      <md-card-content class="inline"> 
       Card content 
      </md-card-content> 

     </md-card> 

    </section> 

Answer 1

Как это?

<div class="demo" ng-app="MyApp"> 
    <md-content class="md-padding" flex-gt-xs="50"> 
    <div layout="column" layout-align="center center"> 
     <md-card> 
     <md-card-title> 
      ... 
     </md-card-title> 
     </md-card> 

     <md-button class="md-fab" aria-label="Eat cake"> 
     <md-icon md-svg-src="img/icons/cake.svg"></md-icon> 
     </md-button> 
    </div> 
    </md-content> 
</div> 

Here's a Codepen модифицировано из одного из оригинальных примеров карт.