<template>
  <Title
    tag="h2"
    :size="2"
    weight="thin"
    leading>
    این یک عنوان می‌باشد
  </Title>
</template>

<template>
  <Subtitle
    tag="h3"
    :size="3"
    weight="thin"
    leading>
    این یک زیرعنوان می‌باشد
  </Subtitle>
</template>

<template>
  <PageTitle
    title="دوباره حساب کن"
    subtitle="شروع کنید"
    text="لورم ایپسوم دولور سیت آمِت، کونسِکتِتُر آدیپیسینگ الیت. کوی ایتا اففکتوس، بیاتوم ا پروبابیس"
  >
    <template #content>
      <Buttons alignment="centered" class="mt-4">
        <Button color="primary" :long="3" bold raised>
          شروع کنید
        </Button>
        <Button :long="3" bold>بیشتد بدانید</Button>
      </Buttons>
    </template>
  </PageTitle>
</template>

<template>
  <SectionTitle title="دوباره حساب کن" subtitle="شروع کنید" />
</template>

<template>
  <CollectionTitle
    title="ترند شده 🔥"
    subtitle="نگاهی داشته باشید به آیتم‌های ترند شده"
  >
    <template #toolbar>
      <Button :long="2">مشاهده همه</Button>
    </template>
  </CollectionTitle>
</template>

<template>
  <!--Paragraph size-->
  <p class="paragraph rem-125">این یک پاراگراف است در اندازه‌ی 1.25rem</p>

  <!--Paragraph color-->
  <p class="paragraph text-primary">این یک پاراگراف است (primary)</p>
</template>

<template>
  <!--Normal link-->
  <a href="https://eltheme.ir" class="link">من یک پیوند نرمال هستم</a>

  <!--RouterLink-->
  <RouterLink :to="{ name: 'index' }" class="link">من یک RouterLink هستم</RouterLink>

  <!--ActionLink-->
  <ActionLink label="پیوند اقدامی" link="index" />

  <!--Animated-->
  <a href="https://eltheme.ir" class="link has-underline">پیوند انیمیشن‌دار</a>
</template>