feat(new component): Initial typography (#199)
* feat: typography * feat: typography * feat: typography * Update docs/components/heading.md * Update src/components/Typography/A.vue * Update src/components/Typography/Heading.vue * Update src/components/Typography/Img.vue * Update src/components/Typography/P.vue --------- Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>
This commit is contained in:
Vasu Singh
GitHub
@@ -18,6 +18,13 @@ function buildSidebar() {
|
||||
collapsible: true,
|
||||
items: [...getFormComponents()],
|
||||
},
|
||||
{
|
||||
text: 'Typography',
|
||||
collapsible: true,
|
||||
items: [
|
||||
...getTypography(),
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Utils',
|
||||
collapsible: true,
|
||||
@@ -75,6 +82,15 @@ function getUtils() {
|
||||
]
|
||||
}
|
||||
|
||||
function getTypography() {
|
||||
return [
|
||||
{ text: 'Heading', link: '/components/heading' },
|
||||
{ text: 'Paragraph', link: '/components/paragraph' },
|
||||
{ text: 'Image', link: '/components/image' },
|
||||
{ text: 'Link', link: '/components/link' }
|
||||
]
|
||||
}
|
||||
|
||||
/**
|
||||
* This can be used as an example
|
||||
* https://github.com/vuejs/vitepress/blob/master/docs/.vitepress/config.js
|
||||
|
||||
142
docs/components/heading.md
Normal file
142
docs/components/heading.md
Normal file
@@ -0,0 +1,142 @@
|
||||
<script setup>
|
||||
import H1 from './typography/heading/H1.vue'
|
||||
import H2 from './typography/heading/H2.vue'
|
||||
import H3 from './typography/heading/H3.vue'
|
||||
import H4 from './typography/heading/H4.vue'
|
||||
import H5 from './typography/heading/H5.vue'
|
||||
import H6 from './typography/heading/H6.vue'
|
||||
import HColor from './typography/heading/HColor.vue'
|
||||
import HCustom from './typography/heading/HCustom.vue'
|
||||
</script>
|
||||
|
||||
# Vue Heading - Flowbite
|
||||
|
||||
#### The heading component defines six levels of title elements from H1 to H6 that are used as titles and subtitles on a web page based on multiple styles and layouts
|
||||
|
||||
## Heading one (H1)
|
||||
|
||||
Use the `tag="h1"` as the most important text element to indicate the title of your web page.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Heading tag="h1">This is my heading</Heading>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Heading from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<H1 />
|
||||
|
||||
## Heading one (H2)
|
||||
|
||||
The H2 tag can be used as subtitles of the page’s sections.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Heading tag="h2">This is my heading</Heading>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Heading from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<H2 />
|
||||
|
||||
## Heading one (H3)
|
||||
|
||||
Use the H3 tags inside sections that already have a H2 available.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Heading tag="h3">This is my heading</Heading>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Heading from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<H3 />
|
||||
|
||||
## Heading one (H4)
|
||||
|
||||
The H4 can be generally used after H2 and H3 tags are already present and you need a more in-depth hierarchy.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Heading tag="h4">This is my heading</Heading>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Heading from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<H4 />
|
||||
|
||||
## Heading one (H5)
|
||||
|
||||
The H5 tag is most often used in longer articles with other heading already available or in sidebars.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Heading tag="h5">This is my heading</Heading>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Heading from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<H5 />
|
||||
|
||||
## Heading one (H6)
|
||||
|
||||
Using the H6 tag is quite rare because it means that you’ve already used all heading from H1 to H5, but you can still use it if you have a very complex article with lots of headings.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Heading tag="h6">This is my heading</Heading>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Heading from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<H6 />
|
||||
|
||||
## Color
|
||||
|
||||
Use the `color` prop to set the text color.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Heading color="text-green-400" tag="h1">This is my heading</Heading>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Heading from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<HColor />
|
||||
|
||||
## Custom classes
|
||||
|
||||
Use the `class` attribute to apply the tailwind classes.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Heading class="!text-xl italic underline" tag="h1">This is my heading</Heading>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Heading from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<HCustom />
|
||||
113
docs/components/image.md
Normal file
113
docs/components/image.md
Normal file
@@ -0,0 +1,113 @@
|
||||
<script setup>
|
||||
import Img from './typography/image/Img.vue'
|
||||
import ImgCap from './typography/image/ImgCap.vue'
|
||||
import ImgSize from './typography/image/ImgSize.vue'
|
||||
import ImgAlign from './typography/image/ImgAlign.vue'
|
||||
import ImgBlur from './typography/image/ImgBlur.vue'
|
||||
import ImgCustom from './typography/image/ImgCustom.vue'
|
||||
</script>
|
||||
|
||||
# Vue Images - Flowbite
|
||||
|
||||
#### The image component can be used to embed images inside the web page in articles and sections based on multiple styles, sizes, layouts and hover animations
|
||||
|
||||
## Default image
|
||||
|
||||
Use this example to show the a responsive image that won’t grow beyond the maximum original width.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Img src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Img from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<Img />
|
||||
|
||||
## Image caption
|
||||
|
||||
This example can be used to add a caption for the image often used inside articles. Use `caption-class` to override the cation.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Img caption="flowbite-vue" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Img from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<ImgCap />
|
||||
|
||||
## Sizes
|
||||
|
||||
Set the size of the image using the `w-size` and `h-size` or `max-w-size` utility classes from Tailwind CSS to set the width and height of the element.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Img size="max-w-md" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Img from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<ImgSize />
|
||||
|
||||
## Alignment
|
||||
|
||||
Align the image component to the center or right side of the document page using `mx-auto` and `ml-auto` margin styles.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Img align="ml-auto" size="max-w-md" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Img from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<ImgAlign />
|
||||
|
||||
## Grayscale
|
||||
|
||||
Use the filter option and apply a grayscale to the image element using the grayscale class.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Img
|
||||
size="max-w-lg"
|
||||
alt="My gallery"
|
||||
img-class="rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0"
|
||||
src="https://flowbite-svelte.com/images/examples/content-gallery-3.png"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Img from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<ImgBlur />
|
||||
|
||||
## Custom classes
|
||||
|
||||
Use the `img-class` prop to apply tailwind classes.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Img img-class="rounded-lg border-[1px]" size="max-w-lg" src="https://flowbite-svelte.com/images/examples/content-gallery-3.png" alt="flowbite-vue" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Img from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<ImgCustom />
|
||||
60
docs/components/link.md
Normal file
60
docs/components/link.md
Normal file
@@ -0,0 +1,60 @@
|
||||
<script setup>
|
||||
import A from './typography/link/A.vue'
|
||||
import APara from './typography/link/APara.vue'
|
||||
import ACustom from './typography/link/ACustom.vue'
|
||||
</script>
|
||||
|
||||
# Vue Links - Flowbite
|
||||
|
||||
#### The link component can be used to set hyperlinks from one page to another or to an external website when clicking on an inline text item, button, or card
|
||||
|
||||
## Default link
|
||||
|
||||
Use this example to set default styles to an inline link element.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<A href="/"> Flowbite-vue </A>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import A from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<A />
|
||||
|
||||
## Para link
|
||||
|
||||
Use this example to set a link inside a paragraph with an underline style.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<P>
|
||||
The free updates that will be provided is based on the <A href="/" class="underline hover:no-underline">roadmap</A> that we have laid out for this project. It is also possible that we will provide
|
||||
extra updates outside of the roadmap as well.
|
||||
</P>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { P, A } from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<APara />
|
||||
|
||||
## Custom classes
|
||||
|
||||
Use `class` attribute prop to apply the tailwind classes.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<A class="underline italic" href="/"> Flowbite-vue </A>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import A from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<ACustom />
|
||||
86
docs/components/paragraph.md
Normal file
86
docs/components/paragraph.md
Normal file
@@ -0,0 +1,86 @@
|
||||
<script setup>
|
||||
import P from './typography/p/P.vue'
|
||||
import PWeight from './typography/p/PWeight.vue'
|
||||
import PAlign from './typography/p/PAlign.vue'
|
||||
import PCustom from './typography/p/PCustom.vue'
|
||||
</script>
|
||||
|
||||
# Vue Paragraph - Flowbite
|
||||
|
||||
#### Use the paragraph component to create multiple blocks of text separated by blank lines and write content based on multiple layouts and styles
|
||||
|
||||
## Default paragraph
|
||||
|
||||
Use this example of a paragraph element to use inside article content or a landing page.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<P>
|
||||
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
|
||||
audit trail for every change.
|
||||
</P>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import P from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<P />
|
||||
|
||||
## Weight
|
||||
|
||||
Use `weight` prop to set the text-weight.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<P weight="light">
|
||||
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
|
||||
audit trail for every change.
|
||||
</P>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import P from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<PWeight />
|
||||
|
||||
## Alignment
|
||||
|
||||
Use `align` prop to set the text alignment.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<P align="center">
|
||||
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
|
||||
audit trail for every change.
|
||||
</P>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import P from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<PAlign />
|
||||
|
||||
## Custom classes
|
||||
|
||||
Use `class` attribute to apply the tailwind classes.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<P class="!text-green-400 italic">
|
||||
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
|
||||
audit trail for every change.
|
||||
</P>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import P from 'flowbite-vue'
|
||||
</script>
|
||||
```
|
||||
|
||||
<PCustom />
|
||||
7
docs/components/typography/heading/H1.vue
Normal file
7
docs/components/typography/heading/H1.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<Heading tag="h1">This is my heading</Heading>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Heading from '../../../../src/components/Typography/Heading.vue'
|
||||
</script>
|
||||
7
docs/components/typography/heading/H2.vue
Normal file
7
docs/components/typography/heading/H2.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<Heading tag="h2">This is my heading</Heading>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Heading from '../../../../src/components/Typography/Heading.vue'
|
||||
</script>
|
||||
7
docs/components/typography/heading/H3.vue
Normal file
7
docs/components/typography/heading/H3.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<Heading tag="h3">This is my heading</Heading>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Heading from '../../../../src/components/Typography/Heading.vue'
|
||||
</script>
|
||||
7
docs/components/typography/heading/H4.vue
Normal file
7
docs/components/typography/heading/H4.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<Heading tag="h4">This is my heading</Heading>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Heading from '../../../../src/components/Typography/Heading.vue'
|
||||
</script>
|
||||
7
docs/components/typography/heading/H5.vue
Normal file
7
docs/components/typography/heading/H5.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<Heading tag="h5">This is my heading</Heading>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Heading from '../../../../src/components/Typography/Heading.vue'
|
||||
</script>
|
||||
7
docs/components/typography/heading/H6.vue
Normal file
7
docs/components/typography/heading/H6.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<Heading tag="h6">This is my heading</Heading>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Heading from '../../../../src/components/Typography/Heading.vue'
|
||||
</script>
|
||||
7
docs/components/typography/heading/HColor.vue
Normal file
7
docs/components/typography/heading/HColor.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<Heading color="text-green-400" tag="h1">This is my heading</Heading>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Heading from '../../../../src/components/Typography/Heading.vue'
|
||||
</script>
|
||||
7
docs/components/typography/heading/HCustom.vue
Normal file
7
docs/components/typography/heading/HCustom.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<Heading class="underline italic !text-xl" tag="h1">This is my heading</Heading>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Heading from '../../../../src/components/Typography/Heading.vue'
|
||||
</script>
|
||||
7
docs/components/typography/image/Img.vue
Normal file
7
docs/components/typography/image/Img.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<Img src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Img from '../../../../src/components/Typography/Img.vue'
|
||||
</script>
|
||||
7
docs/components/typography/image/ImgAlign.vue
Normal file
7
docs/components/typography/image/ImgAlign.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<Img alignment="mx-auto" size="max-w-md" src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Img from '../../../../src/components/Typography/Img.vue'
|
||||
</script>
|
||||
13
docs/components/typography/image/ImgBlur.vue
Normal file
13
docs/components/typography/image/ImgBlur.vue
Normal file
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<Img
|
||||
size="max-w-lg"
|
||||
alt="My gallery"
|
||||
alignment="mx-auto"
|
||||
img-class="rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0"
|
||||
src="https://flowbite-svelte.com/images/examples/content-gallery-3.png"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Img from '../../../../src/components/Typography/Img.vue'
|
||||
</script>
|
||||
7
docs/components/typography/image/ImgCap.vue
Normal file
7
docs/components/typography/image/ImgCap.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<Img caption="flowbite-vue" src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Img from '../../../../src/components/Typography/Img.vue'
|
||||
</script>
|
||||
7
docs/components/typography/image/ImgCustom.vue
Normal file
7
docs/components/typography/image/ImgCustom.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<Img img-class="rounded-lg border-[1px]" alignment="mx-auto" size="max-w-lg" src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Img from '../../../../src/components/Typography/Img.vue'
|
||||
</script>
|
||||
7
docs/components/typography/image/ImgSize.vue
Normal file
7
docs/components/typography/image/ImgSize.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<Img size="max-w-md" src="https://flowbite-svelte.com/images/examples/image-1@2x.jpg" alt="flowbite-vue" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Img from '../../../../src/components/Typography/Img.vue'
|
||||
</script>
|
||||
7
docs/components/typography/link/A.vue
Normal file
7
docs/components/typography/link/A.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<A href="/">Flowbite-vue </A>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import A from '../../../../src/components/Typography/A.vue'
|
||||
</script>
|
||||
7
docs/components/typography/link/ACustom.vue
Normal file
7
docs/components/typography/link/ACustom.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<A class="underline italic" href="/">Flowbite-vue </A>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import A from '../../../../src/components/Typography/A.vue'
|
||||
</script>
|
||||
11
docs/components/typography/link/APara.vue
Normal file
11
docs/components/typography/link/APara.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<P>
|
||||
The free updates that will be provided is based on the <A href="/" class="underline hover:no-underline">roadmap</A> that we have laid out for this project. It is also possible that we will provide
|
||||
extra updates outside of the roadmap as well.
|
||||
</P>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import A from '../../../../src/components/Typography/A.vue'
|
||||
import P from '../../../../src/components/Typography/P.vue'
|
||||
</script>
|
||||
10
docs/components/typography/p/P.vue
Normal file
10
docs/components/typography/p/P.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<P>
|
||||
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
|
||||
audit trail for every change.
|
||||
</P>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import P from '../../../../src/components/Typography/P.vue'
|
||||
</script>
|
||||
10
docs/components/typography/p/PAlign.vue
Normal file
10
docs/components/typography/p/PAlign.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<P align="center">
|
||||
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
|
||||
audit trail for every change.
|
||||
</P>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import P from '../../../../src/components/Typography/P.vue'
|
||||
</script>
|
||||
10
docs/components/typography/p/PCustom.vue
Normal file
10
docs/components/typography/p/PCustom.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<P class="!text-green-400 italic">
|
||||
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
|
||||
audit trail for every change.
|
||||
</P>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import P from '../../../../src/components/Typography/P.vue'
|
||||
</script>
|
||||
10
docs/components/typography/p/PWeight.vue
Normal file
10
docs/components/typography/p/PWeight.vue
Normal file
@@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<P weight="light">
|
||||
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete
|
||||
audit trail for every change.
|
||||
</P>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import P from '../../../../src/components/Typography/P.vue'
|
||||
</script>
|
||||
Reference in New Issue
Block a user