7fd3b4f3a6
* 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>
87 lines
2.1 KiB
Markdown
87 lines
2.1 KiB
Markdown
<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 />
|