Структура макета - макет карты и панель инструментов с angularjs md

Question

Как я могу использовать AngularJS Material Design lib, чтобы создать структуру страницы, например, описанную в официальном Layout structure guideline и проиллюстрированную на скриншоте ниже? Я хочу, чтобы централизованная карта разбивала края панели инструментов страницы. Пример Codepen будет высоко оценен.

Edit: связанные темы: Angular Material Design layout

Answer 1

Вы можете легко сделать это с небольшим количеством CSS

.card_position{ 
    margin-top:-70px 
} 

Добавить этот класс к элементу карты.

Answer 2

Я решил, что опубликую это, чтобы помочь другим, пытающимся сделать то же самое с Materialize CSS. Вы можете изменить высоту навигационной панели и размер/расположение карты.

Demo

HTML

<nav> 
    <div class="nav-wrapper"> 
     <a href="#" class="brand-logo left"><i class="material-icons">list</i></a> 
    </div> 
    <div class="nav-wrapper"> 
    </div> 
</nav> 
< 
<<div class="row" id="card-placement"> <!-- id added here --> 
    <div class="col s12 m8 offset-m2"> 
     <div class="card grey lighten-5"> 
      <div class="card-content grey-text text-darken-1"> 
       <h5 class="head">Title</h5> <!-- class added here --> 
       <div class="divider"></div> 
       &nbsp; 
        <p>Stuff goes here</p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

/* Moves card up into navbar */ 
#card-placement{ 
    margin-top:-60px 
} 
/* Moves Title position up to be level with nav bottom */ 
.head { 
margin-top: -2px; 
} 

nav { 
    color: #fff; 
    background-color: #ee6e73; 
    width: 100%; 
    height: 112px; 
    line-height: 56px; 
} 

.nav-wrapper { 
    margin-left: 20px; 
}