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>
2.1 KiB
2.1 KiB
<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.
<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>
Weight
Use weight prop to set the text-weight.
<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>
Alignment
Use align prop to set the text alignment.
<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>
Custom classes
Use class attribute to apply the tailwind classes.
<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>