TypographyTexts.vue 2.93 KB
<template>
  <VCard title="Texts">
    <VCardText>
      <VRow no-gutters>
        <VCol
          cols="12"
          md="2"
        >
          <p class="text-subtitle-1 text-no-wrap">
            text-subtitle-1
          </p>
        </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: 0.9375rem / line-height: 1.5rem / font-weight: 500</span>
        </VCol>

        <VCol
          cols="12"
          md="2"
        >
          <p class="text-subtitle-2 text-no-wrap">
            text-subtitle-2
          </p>
        </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.8125rem / line-height: 1.25rem / font-weight: 500</span>
        </VCol>

        <VCol
          cols="12"
          md="2"
        >
          <p class="text-body-1 text-no-wrap">
            text-body-1
          </p>
        </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: 0.9375rem / line-height: 1.375rem / font-weight: 400</span>
        </VCol>

        <VCol
          cols="12"
          md="2"
        >
          <p class="text-body-2 text-no-wrap">
            text-body-2
          </p>
        </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.8125rem / line-height: 1.25rem / font-weight: 400</span>
        </VCol>

        <VCol
          cols="12"
          md="2"
        >
          <p class="text-caption">
            text-caption
          </p>
        </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.8125rem / line-height: 1.125rem / font-weight: 400</span>
        </VCol>

        <VCol
          cols="12"
          md="2"
        >
          <p class="text-overline text-no-wrap">
            text-overline
          </p>
        </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: 0.875rem / font-weight: 400</span>
        </VCol>
      </VRow>
    </VCardText>
  </VCard>
</template>