<div class="page-layout plain overflow-hidden pb-8">
  <div class="header blue"></div>
  
  <div class="content">
    <div class="content-header blue p-24" fxLayout="row wrap" fxLayoutAlign="start center">
      <h1 class="text-white m-0 px-24">Border utility classes</h1>
    </div>

    <div class="content-body p-24">
      <mat-card>
        <div fxLayout="row wrap" class="mb-24">
          <div class="h-80 w-80 border light-gray mr-16"></div>
          <div>
            <pre><code [matxHighlight]="
              '<div class=&quot;border&quot;></div>'
            "></code></pre>
          </div>
        </div>
        <div fxLayout="row wrap" class="mb-24">
          <div class="h-80 w-80 border-top mr-16 light-gray"></div>
          <div>
            <pre><code [matxHighlight]="
              '<div class=&quot;border-top&quot;></div>'
            "></code></pre>
          </div>
        </div>

        <div fxLayout="row wrap" class="mb-24">
          <div class="h-80 w-80 border-right mr-16 light-gray"></div>
          <div>
            <pre><code [matxHighlight]="
              '<div class=&quot;border-right&quot;></div>'
            "></code></pre>
          </div>
        </div>
        <div fxLayout="row wrap" class="mb-24">
          <div class="h-80 w-80 border-bottom mr-16 light-gray"></div>
          <div>
            <pre><code [matxHighlight]="
              '<div class=&quot;border-bottom&quot;></div>'
            "></code></pre>
          </div>
        </div>
        <div fxLayout="row wrap" class="mb-24">
          <div class="h-80 w-80 border-left mr-16 light-gray"></div>
          <div>
            <pre><code [matxHighlight]="
              '<div class=&quot;border-left&quot;></div>'
            "></code></pre>
          </div>
        </div>
      </mat-card>
    </div>

  </div>

</div>