<template>
  <Title 
    tag="h2" 
    :size="2" 
    weight="thin" 
    leading>
    This is a title
  </Title>
</template>

<template>
  <Subtitle 
    tag="h3" 
    :size="3" 
    weight="thin" 
    leading>
    This is a subtitle
  </Subtitle>
</template>

<template>
  <PageTitle
    title="Make it count again"
    subtitle="Get Started"
    text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Qui ita affectus, beatum esse numquam probabis"
  >
    <template #content>
      <Buttons alignment="centered" class="mt-4">
        <Button color="primary" :long="3" bold raised>
          Get Started
        </Button>
        <Button :long="3" bold>Learn More</Button>
      </Buttons>
    </template>
  </PageTitle>
</template>

<template>
  <SectionTitle title="Make it count again" subtitle="Get Started" />
</template>

<template>
  <CollectionTitle
    title="Trending 🔥"
    subtitle="Take a closer look at our trending items"
  >
    <template #toolbar>
      <Button :long="2">View All</Button>
    </template>
  </CollectionTitle>
</template>

<template>
  <!--Paragraph size-->
  <p class="paragraph rem-125">This is a paragraph at 1.25rem</p>

  <!--Paragraph color-->
  <p class="paragraph text-primary">This is a paragraph (primary)</p>
</template>

<template>
  <!--Normal link-->
  <a href="https://cssninja.io" class="link">Iam a normal link</a>

  <!--RouterLink-->
  <RouterLink :to="{ name: 'index' }" class="link">Iam a RouterLink</RouterLink>

  <!--ActionLink-->
  <ActionLink label="Iam an action link" link="index" />

  <!--Animated-->
  <a href="https://cssninja.io" class="link has-underline">Animated link</a>
</template>