Block Svelte 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 |
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 |
---|---|---|---|
withBlock | boolean | true | Useful to disable when there is no Block or List component right after the Block Title |
Name | Type | Default | Description |
---|
Name | Type | Default | Description |
---|
<script>import {Page,Navbar,NavbarBackLink,Block,BlockFooter,BlockHeader,BlockTitle,} from 'konsta/svelte';</script><Page><Navbar title="Content Block" /><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></Block><BlockTitle>Block Title</BlockTitle><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></Block><BlockTitle>With Header & Footer</BlockTitle><BlockHeader>Header</BlockHeader><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></Block><BlockFooter>Footer</BlockFooter><BlockTitle class="text-2xl">Medium Title</BlockTitle><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></Block><BlockTitle class="text-3xl">Large Title</BlockTitle><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></Block><BlockTitle>Inset Block</BlockTitle><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></Block></Page>