<mat-card>
    <div fxLayout="row wrap" fxLayoutAlign="space-between center" class="mb-24">
      <span class="mat-display-1 my-0 mr-16">Display 1</span>
      <div>
          <pre><code [matxHighlight]="
            '<span class=&quot;mat-display-1&quot;></span>'
          "></code></pre>
        </div>
    </div>
    <div fxLayout="row wrap" fxLayoutAlign="space-between center" class="mb-24">
        <span class="mat-display-2 my-0 mr-16">Display 2</span>
        <div>
            <pre><code [matxHighlight]="
              '<span class=&quot;mat-display-2&quot;></span>'
            "></code></pre>
          </div>
    </div>
    <div fxLayout="row wrap" fxLayoutAlign="space-between center" class="mb-24">
        <span class="mat-display-3 my-0 mr-16">Display 3</span>
        <div>
            <pre><code [matxHighlight]="
              '<span class=&quot;mat-display-3&quot;></span>'
            "></code></pre>
          </div>
    </div>
    <div fxLayout="row wrap" fxLayoutAlign="space-between center" class="mb-24">
        <span class="mat-display-4 my-0 mr-16">Display 4</span>
        <div>
            <pre><code [matxHighlight]="
              '<span class=&quot;mat-display-4&quot;></span>'
            "></code></pre>
          </div>
    </div>
    <div fxLayout="row wrap" fxLayoutAlign="space-between center" class="mb-24">
      <span class="mat-headline my-0 mr-16">Headline</span>
      <div>
          <pre><code [matxHighlight]="
            '<span class=&quot;mat-headline&quot;></span>'
          "></code></pre>
        </div>
    </div>
    <div fxLayout="row wrap" fxLayoutAlign="space-between center" class="mb-24">
      <span class="mat-title my-0 mr-16">Title</span>
      <div>
          <pre><code [matxHighlight]="
            '<span class=&quot;mat-title&quot;></span>'
          "></code></pre>
        </div>
    </div>
    <div fxLayout="row wrap" fxLayoutAlign="space-between center" class="mb-24">
      <span class="mat-subheading-1 my-0 mr-16">Subheading 1</span>
      <div>
          <pre><code [matxHighlight]="
            '<span class=&quot;mat-subheading-1&quot;></span>'
          "></code></pre>
        </div>
    </div>
    <div fxLayout="row wrap" fxLayoutAlign="space-between center" class="mb-24">
      <span class="mat-subheading-2 my-0 mr-16">Subheading 2</span>
      <div>
          <pre><code [matxHighlight]="
            '<span class=&quot;mat-subheading-2&quot;></span>'
          "></code></pre>
        </div>
    </div>
    <div fxLayout="row wrap" fxLayoutAlign="space-between center" class="mb-24">
      <span class="mat-heading-label my-0 mr-16">Heading Label</span>
      <div>
          <pre><code [matxHighlight]="
            '<span class=&quot;mat-heading-label&quot;></span>'
          "></code></pre>
        </div>
    </div>
    <div fxLayout="row wrap" fxLayoutAlign="space-between center" class="mb-24">
      <span class="mat-body-1 my-0 mr-16">Body 1</span>
      <div>
          <pre><code [matxHighlight]="
            '<span class=&quot;mat-body-1&quot;></span>'
          "></code></pre>
        </div>
    </div>
    <div fxLayout="row wrap" fxLayoutAlign="space-between center" class="mb-24">
      <span class="mat-body-2 my-0 mr-16">Body 2</span>
      <div>
          <pre><code [matxHighlight]="
            '<span class=&quot;mat-body-2&quot;></span>'
          "></code></pre>
        </div>
    </div>
    <div fxLayout="row wrap" fxLayoutAlign="space-between center" class="mb-24">
      <span class="mat-caption my-0 mr-16">Caption</span>
      <div>
          <pre><code [matxHighlight]="
            '<span class=&quot;mat-caption&quot;></span>'
          "></code></pre>
        </div>
    </div>

  </mat-card>