<app-breadcrumb [path]="routes.WIDGET"></app-breadcrumb>

<div class="content-wrapper">
  <mat-card appearance="outlined" class="card">
    <mat-card-title>
      <p>Simple Widget</p>
    </mat-card-title>

    <mat-card-subtitle>
      <p>
        A simple widget can be built with Angular Material cards and placed at the top of a page section.
      </p>
    </mat-card-subtitle>

    <mat-card-content>
      <mat-card appearance="outlined" class="inner-card">
        <mat-card-title>
          <p>Simple Widget</p>
        </mat-card-title>

        <mat-card-subtitle>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A, rem?</p>
        </mat-card-subtitle>
      </mat-card>

      <div class="code-wrapper">
        <pre>
<code class="text-primary">{{'<'}}mat-card{{'>'}}</code>
  <code class="text-info">{{'<'}}mat-card-title{{'>'}}</code>
    <code class="text-warn">{{'<'}}p{{'>'}}</code>Simple Widget<code class="text-warn">{{'<'}}/p{{'>'}}</code>
  <code class="text-info">{{'<'}}/mat-card-title{{'>'}}</code>

  <code class="text-info">{{'<'}}mat-card-subtitle{{'>'}}</code>
    <code class="text-warn">{{'<'}}p{{'>'}}</code>
      Lorem ipsum dolor sit amet consectetur,
      adipisicing elit. A, rem?
    <code class="text-warn">{{'<'}}/p{{'>'}}</code>
  <code class="text-info">{{'<'}}/mat-card-subtitle{{'>'}}</code>
<code class="text-primary">{{'<'}}/mat-card{{'>'}}</code>
        </pre>
      </div>
    </mat-card-content>
  </mat-card>

  <mat-card appearance="outlined" class="card">
    <mat-card-title>
      <p>Page Title</p>
    </mat-card-title>

    <mat-card-subtitle>
      <p>
        Use title and subtitle blocks to build a compact page header widget.
      </p>
    </mat-card-subtitle>

    <mat-card-content>
      <mat-card appearance="outlined" class="inner-card">
        <mat-card-title>
          <p>Page Title</p>
        </mat-card-title>
        <mat-card-subtitle>
          <p>Short helper text for this page section</p>
        </mat-card-subtitle>
      </mat-card>

      <pre>
<code class="text-primary">{{'<'}}mat-card-title{{'>'}}</code>
  <code class="text-warn">{{'<'}}p{{'>'}}</code>Page Title<code class="text-warn">{{'<'}}/p{{'>'}}</code>
<code class="text-primary">{{'<'}}/mat-card-title{{'>'}}</code>
      </pre>
    </mat-card-content>
  </mat-card>
</div>
