Master Blocks

Collection of carefully crafted and elegantly designed building blocks for MasterCSS

Headers2 Heroes1 Blog1 Content0 CTA0 Testimonials0 Footers0
Headers
Add New Block
MASTER BLOCKS 
<header>
    <div class="color:gray-10 mx:auto flex flex-wrap:wrap flex:row flex:col@<=md padding:10 align-items:center">
        <a class="flex align-items:center text-gray-900 mb-4 md:mb-0 font-size:24">
          MASTER BLOCKS
        </a>
        <nav class="ml:auto ml:0@<=md flex flex-wrap:wrap align-items:center mt:0 mt:15@<=md">
          <a class="mr:15 text-decoration:none color:gray-10 color:gray-20:hover " href="#">First Link</a>
          <a class="mr:15 text-decoration:none color:gray-10 color:gray-20:hover" href="#">Second Link</a>
          <a class="mr:15 text-decoration:none color:gray-10 color:gray-20:hover" href="#">Third Link</a>
          <a class="text-decoration:none color:gray-10 color:gray-20:hover" href="#">Fourth Link</a>
        </nav>
    </div>
</header>
MASTER BLOCKS 
<header>
  <div class="color:gray-10 mx:auto flex flex-wrap:wrap flex:row flex:col@<=md padding:10 align-items:center">
    <a class="flex align-items:center text-gray-900 mb-4 md:mb-0 font-size:24">
      MASTER BLOCKS
    </a>
    <nav class="ml:25@lg flex flex-wrap:wrap align-items:center mt:0 mt:15@<=md">
      <a class="mr:15 text-decoration:none color:gray-10 color:gray-20:hover " href="#">First Link</a>
      <a class="mr:15 text-decoration:none color:gray-10 color:gray-20:hover" href="#">Second Link</a>
      <a class="mr:15 text-decoration:none color:gray-10 color:gray-20:hover" href="#">Third Link</a>
      <a class="text-decoration:none color:gray-10 color:gray-20:hover" href="#">Fourth Link</a>
    </nav>
  </div>
</header>