Block React 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 |
import React from 'react';import {Page,Navbar,NavbarBackLink,Block,BlockFooter,BlockHeader,BlockTitle,} from 'konsta/react';export default function ContentBlockPage() {return (<Page><Navbartitle="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 className="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 className="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>);}