<template>
  <VRow>
    <VCol cols="12">
      <VCard title="Headlines">
        <VCardText class="d-flex flex-column gap-y-8">
          <div>
            <h1 class="text-h1">
              Heading 1
            </h1>
            <span>font-size: 6rem / line-height: 6rem / font-weight: 300</span>
          </div>

          <div>
            <h2 class="text-h2">
              Heading 2
            </h2>
            <span>font-size: 3.75rem / line-height: 3.75rem / font-weight: 300</span>
          </div>

          <div>
            <h3 class="text-h3">
              Heading 3
            </h3>
            <span>font-size: 3rem / line-height: 3.125rem / font-weight: 400</span>
          </div>

          <div>
            <h4 class="text-h4">
              Heading 4
            </h4>
            <span>font-size: 2.125rem / line-height: 2.5rem / font-weight: 400</span>
          </div>

          <div>
            <h5 class="text-h5">
              Heading 5
            </h5>
            <span>font-size: 1.5rem  / line-height: 2rem / font-weight: 400</span>
          </div>

          <div>
            <h6 class="text-h6">
              Heading 6
            </h6>
            <span>font-size: 1.25rem / line-height: 2rem / font-weight: 500</span>
          </div>
        </VCardText>
      </VCard>
    </VCol>

    <VCol cols="12">
      <VCard title="Texts">
        <VCardText>
          <VRow no-gutters>
            <VCol
              cols="12"
              md="2"
            >
              <span class="text-subtitle-1 text-no-wrap">text-subtitle-1</span>
            </VCol>
            <VCol
              cols="12"
              md="10"
              class="mb-6"
            >
              <p class="text-subtitle-1 text-truncate mb-1">
                Cupcake ipsum dolor sit amet fruitcake donut chocolate.
              </p>
              <span>font-size: 1rem / line-height: 1.75rem / font-weight: 400</span>
            </VCol>

            <VCol
              cols="12"
              md="2"
            >
              <span class="text-subtitle-2 text-no-wrap">text-subtitle-2</span>
            </VCol>
            <VCol
              cols="12"
              md="10"
              class="mb-6"
            >
              <p class="text-subtitle-2 mb-1">
                Cupcake ipsum dolor sit amet fruitcake donut chocolate.
              </p>
              <span>font-size: 0.875rem / line-height: 1.375rem / font-weight: 500</span>
            </VCol>

            <VCol
              cols="12"
              md="2"
            >
              <span class="text-body-1 text-no-wrap">text-body-1</span>
            </VCol>
            <VCol
              cols="12"
              md="10"
              class="mb-6"
            >
              <p class="text-body-1 mb-1">
                Cupcake ipsum dolor sit amet fruitcake donut chocolate.
              </p>
              <span>font-size: 1rem / line-height: 1.5rem / font-weight: 400</span>
            </VCol>

            <VCol
              cols="12"
              md="2"
            >
              <span class="text-body-2 text-no-wrap">text-body-2</span>
            </VCol>
            <VCol
              cols="12"
              md="10"
              class="mb-6"
            >
              <p class="text-body-2 mb-1">
                Cupcake ipsum dolor sit amet fruitcake donut chocolate.
              </p>
              <span>font-size: 0.875rem / line-height: 1.25rem / font-weight: 400</span>
            </VCol>

            <VCol
              cols="12"
              md="2"
            >
              <span class="text-caption">text-caption</span>
            </VCol>
            <VCol
              cols="12"
              md="10"
              class="mb-6"
            >
              <p class="text-caption mb-1">
                Cupcake ipsum dolor sit amet fruitcake donut chocolate.
              </p>
              <span>font-size: 0.75rem / line-height: 1.25rem / font-weight: 400</span>
            </VCol>

            <VCol
              cols="12"
              md="2"
            >
              <span class="text-overline text-no-wrap">text-overline</span>
            </VCol>
            <VCol
              cols="12"
              md="10"
              class="mb-6"
            >
              <p class="text-overline mb-1">
                Cupcake ipsum dolor sit amet fruitcake donut chocolate.
              </p>
              <span>font-size: 0.75rem / line-height: 2rem / font-weight: 500</span>
            </VCol>

            <VCol
              cols="12"
              md="2"
            >
              <span class="text-button">text-button</span>
            </VCol>
            <VCol
              cols="12"
              md="10"
              class="mb-6"
            >
              <p class="text-button mb-1">
                Cupcake ipsum dolor sit amet fruitcake donut chocolate.
              </p>
              <span>font-size: 0.875rem / line-height: 2.25rem / font-weight: 500</span>
            </VCol>
          </VRow>
        </VCardText>
      </VCard>
    </VCol>
  </VRow>
</template>
