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

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

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

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

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

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

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