<template>
  <VCard title="Headlines">
    <VCardText class="d-flex flex-column gap-y-8">
      <div>
        <h1 class="text-h1">
          Heading 1
        </h1>
        <span>font-size: 2.875rem / line-height: 4.25rem / font-weight: 500</span>
      </div>

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

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

      <div>
        <h4 class="text-h4">
          Heading 4
        </h4>
        <span>font-size: 1.5rem / line-height: 2.375rem / font-weight: 500</span>
      </div>

      <div>
        <h5 class="text-h5">
          Heading 5
        </h5>
        <span>font-size: 1.125rem  / line-height: 1.75rem / font-weight: 500</span>
      </div>

      <div>
        <h6 class="text-h6">
          Heading 6
        </h6>
        <span>font-size: 0.9375rem / line-height: 1.75rem / font-weight: 500</span>
      </div>
    </VCardText>
  </VCard>
</template>
