<template>
  <VCard title="Texts">
    <VCardText>
      <VRow no-gutters>
        <VCol
          cols="12"
          md="2"
        >
          <span class="text-subtitle-1">text-subtitle-1</span>
        </VCol>
        <VCol
          cols="12"
          md="10"
          class="mb-6"
        >
          <p class="text-subtitle-1 mb-1">
            Cupcake ipsum dolor sit amet fruitcake donut chocolate.
          </p>
          <span>size: 16 / l-height: 24 / weight:600 / letterSpacing: 0</span>
        </VCol>

        <VCol
          cols="12"
          md="2"
        >
          <span class="text-subtitle-2">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>size: 14 / l-height: 22 / weight:600 / letterSpacing: 0</span>
        </VCol>

        <VCol
          cols="12"
          md="2"
        >
          <span class="text-body-1">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>size: 16 / l-height: 24 / weight:400 / letterSpacing: 0</span>
        </VCol>

        <VCol
          cols="12"
          md="2"
        >
          <span class="text-body-2">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>size: 14 / l-height: 22 / weight:400 / letterSpacing: 0</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>size: 12 / l-height: 18 / weight:400 / letterSpacing: 0</span>
        </VCol>

        <VCol
          cols="12"
          md="2"
        >
          <span class="text-overline">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>size: 12 / l-height: 18 / weight:700 / letterSpacing: 0</span>
        </VCol>

        <VCol
          cols="12"
          md="2"
        >
          <span class="text-button">text-button</span>
        </VCol>
        <VCol
          cols="12"
          md="10"
        >
          <p class="text-button mb-1">
            Cupcake ipsum dolor sit amet fruitcake donut chocolate.
          </p>
          <span>size: 14 / l-height: 24 / weight:700 / letterSpacing: 0</span>
        </VCol>
      </VRow>
    </VCardText>
  </VCard>
</template>
