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

<div class="typography-content">
  <div class="typography-content__wrapper">
    <mat-card appearance="outlined" class="typography-content__item-wrapper">
      <mat-card-title>
        <p>Headings</p>
      </mat-card-title>
      <div class="typography-content__headings">
        <h1>h1. Heading</h1>
        <h2>h2. Heading</h2>
        <h3>h3. Heading</h3>
        <h4>h4. Heading</h4>
        <h5>h5. Heading</h5>
        <h6>h6. Heading</h6>
      </div>
    </mat-card>

    <mat-card appearance="outlined" class="typography-content__item-wrapper">
      <mat-card-title>
        <p>Typography Colors</p>
      </mat-card-title>
      <div class="typography-content__colors">
        <h1 class="typography-content__colors_blue">h1. Heading</h1>
        <h2 class="typography-content__colors_green">h2. Heading</h2>
        <h3 class="typography-content__colors_pink">h3. Heading</h3>
        <h4 class="typography-content__colors_yellow">h4. Heading</h4>
        <h5 class="typography-content__colors_light-blue">h5. Heading</h5>
        <h6 class="typography-content__colors_violet">h6. Heading</h6>
    </div>
    </mat-card>
  </div>

  <div class="typography-content__wrapper">
    <mat-card appearance="outlined" class="typography-content__item-wrapper">
      <mat-card-title>
        <p>Basic Text Settings</p>
      </mat-card-title>
      <div class="typography-content__settings">
        <p>Basic text</p>
        <p class="fw-light">Basic light text</p>
        <p class="fw-medium">Basic medium text</p>
        <p class="fw-bold">Basic bold text</p>
        <p class="font-uppercase">basic lowercase text</p>
        <p class="font-lowercase">basic lowercase text</p>
        <p>Basic Capitalized Text</p>
        <p class="fst-italic">Basic Cursive Text</p>
      </div>
    </mat-card>
    <mat-card appearance="outlined" class="typography-content__item-wrapper">
      <mat-card-title>
        <p>Text Size</p>
      </mat-card-title>
      <div class="typography-content__size">
        <p class="fs-sm">Heading Typography SM Font Size</p>
        <p class="fs-regular">Heading Typography Regular Font Size</p>
        <p class="fs-md">Heading Typography MD Font Size</p>
        <p class="fs-xl">Heading Typography XL Font Size</p>
        <p class="fs-xxl"> Heading Typography XXL Font Size</p>
      </div>
    </mat-card>
  </div>
</div>
