Link

import { Link } from '@pillar-ui/core'

export const LinkSize = () => {
  return (
    <>
      <Link size="1">Hello World</Link>
      <Link size="2">Hello World</Link>
      <Link size="3">Hello World</Link>
      <Link size="4">Hello World</Link>
      <Link size="5">Hello World</Link>
      <Link size="6">Hello World</Link>
      <Link size="7">Hello World</Link>
      <Link size="8">Hello World</Link>
      <Link size="9">Hello World</Link>
    </>
  )
}

import { Link } from '@pillar-ui/core'

export const LinkWeight = () => {
  return (
    <>
      <Link weight="1">Hello World</Link>
      <Link weight="2">Hello World</Link>
      <Link weight="3">Hello World</Link>
      <Link weight="4">Hello World</Link>
      <Link weight="5">Hello World</Link>
      <Link weight="6">Hello World</Link>
      <Link weight="7">Hello World</Link>
      <Link weight="8">Hello World</Link>
      <Link weight="9">Hello World</Link>
    </>
  )
}

import { Link } from '@pillar-ui/core'

export const LinkTruncate = () => {
  return (
    <>
      <Link size="9" truncate="1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Link>
      <Link size="9" truncate="2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Link>
      <Link size="9" truncate="3">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Link>
      <Link size="9" truncate="4">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Link>

      <Link size="9" truncate="5">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Link>

      <Link size="9">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Link>
    </>
  )
}

import { Link } from '@pillar-ui/core'

export const LinkAlign = () => {
  return (
    <>
      <Link align="start">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Link>
      <Link align="center">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Link>
      <Link align="end">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione saepe, enim impedit totam minus corrupti sequi
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
        eveniet sunt animi laborum optio dolores dolorum! Libero iste tempora, facilis dolore molestiae temporibus!
      </Link>
    </>
  )
}

import { Link } from '@pillar-ui/core'

export const LinkColor = () => {
  return (
    <>
      <Link color="d">Hello World</Link>
      <Link color="su">Hello World</Link>
      <Link color="w">Hello World</Link>
      <Link color="p">Hello World</Link>
      <Link color="b">Hello World</Link>
      <Link color="se">Hello World</Link>
      <Link color="i">Hello World</Link>

      <Link low color="d">
        Hello World world
      </Link>
      <Link low color="su">
        Hello World
      </Link>
      <Link low color="w">
        Hello World
      </Link>
      <Link low color="p">
        Hello World
      </Link>
      <Link low color="b">
        Hello World
      </Link>
      <Link low color="se">
        Hello World
      </Link>
      <Link low color="i">
        Hello World
      </Link>
    </>
  )
}

import { Link } from '@pillar-ui/core'
import React from 'react'

export const LinkStyle = () => {
  return (
    <>
      <Link>Lorem ipsum dolor.</Link>
      <Link fontStyle="italic">Lorem ipsum dolor.</Link>
      <Link fontStyle="oblique">Lorem ipsum dolor.</Link>
    </>
  )
}

import { Link } from '@pillar-ui/core'
import React from 'react'

export function LinkDecoration() {
  return (
    <div className="Sf-4">
      <Link decoration="through">Hello World.</Link>
      <Link decoration="under">Hello World.</Link>
      <Link decoration="over">Hello World.</Link>
    </div>
  )
}

import { Link } from '@pillar-ui/core'

export const LinkLeading = () => {
  return (
    <>
      <Link leading="1">This heading has a normal line height.</Link>
      <Link leading="2">This heading has a small line height.</Link>
      <Link leading="3">This heading has a medium line height.</Link>
      <Link leading="4">This heading has a large line height.</Link>
      <Link leading="5">This heading has a large line height.</Link>
    </>
  )
}

import { Link } from '@pillar-ui/core'

export const LinkRTL = () => {
  return (
    <>
      <Link dir="rtl">
        مُرَاكُش اموراكوش، «أرض الله») تسمى أيضًا بالمدينة الحمراء وعاصمة النخيل، هي ثالث أكبر مدينة في المملكة المغربية
        من ناحية عدد السكان. وهي عاصمة جهة مراكش آسفي. تقع مراكش على بعد 580 كم (360 ميل) جنوب شرق طنجة، 327 كم (203
        ميل) جنوب شرق العاصمة المغربية الرباط، 239 كم (149 ميل) جنوب شرق الدار البيضاء، و 246 كم (153 ميل) شمال شرق
        أكادير.
      </Link>
      <Link dir="rtl">ކޯޑް ކުރަން ދަސްކުރުމަކީ އަހަރެންގެ މުޅި އުމުރުގައި ވެސް ކުރި އެންމެ ރަނގަޅު ކަމެކެވެ</Link>
    </>
  )
}