Block Vue component represents Content Block element designed (mostly) to add extra formatting and required spacing for text content.
There are following components included:
Block
- main block elementBlockTitle
- block title. Can be used before Block or List ViewBlockHeader
- extra header element. Can be used both inside and outside of block elementsBlockFooter
- extra footer element. Can be used both inside and outside of block elementsName | Type | Default | Description |
---|---|---|---|
colors | object | Object with Tailwind CSS colors classes | |
colors.strongBg | string | 'bg-block-strong-light dark:bg-block-strong-dark' | Strong block bg color |
component | string | 'div' | Component's HTML Element |
hairlines | boolean | true | Renders outer hairlines (borders) when the block is |
inset | boolean | false | Makes block inset |
margin | string | 'my-8' | Tailwind CSS margin class |
nested | boolean | false | Removes hairlines and margins, useful for case nesting block within other blocks |
strong | boolean | false | Adds extra highlighting and padding block content |
Name | Type | Default | Description |
---|---|---|---|
component | string | 'div' | Component's HTML Element |
withBlock | boolean | true | Useful to disable when there is no Block or List component right after the Block Title |
Name | Type | Default | Description |
---|---|---|---|
component | string | 'div' | Component's HTML Element |
Name | Type | Default | Description |
---|---|---|---|
component | string | 'div' | Component's HTML Element |
<template><k-page><k-navbar title="Content Block" /><k-block><p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quammollis, vulputate turpis vel, sagittis felis.</p></k-block><k-block-title>Block Title</k-block-title><k-block strong><p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quammollis, vulputate turpis vel, sagittis felis.</p></k-block><k-block-title>With Header & Footer</k-block-title><k-block-header>Header</k-block-header><k-block strong><p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quammollis, vulputate turpis vel, sagittis felis.</p></k-block><k-block-footer>Footer</k-block-footer><k-block-title class="text-2xl">Medium Title</k-block-title><k-block strong><p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quammollis, vulputate turpis vel, sagittis felis.</p></k-block><k-block-title class="text-3xl">Large Title</k-block-title><k-block strong><p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quammollis, vulputate turpis vel, sagittis felis.</p></k-block><k-block-title>Inset Block</k-block-title><k-block strong inset><p>Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quammollis, vulputate turpis vel, sagittis felis.</p></k-block></k-page></template><script>import {kPage,kNavbar,kNavbarBackLink,kBlock,kBlockFooter,kBlockHeader,kBlockTitle,} from 'konsta/vue';export default {components: {kPage,kNavbar,kNavbarBackLink,kBlock,kBlockFooter,kBlockHeader,kBlockTitle,},};</script>