<template>
  <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>
</template>
