Block React Component

Block Components
Block Props
BlockTitle Props
BlockHeader Props
BlockFooter Props
Examples

Block React component represents Content Block element designed (mostly) to add extra formatting and required spacing for text content.

Block Components

There are following components included:

Block - main block element
BlockTitle - block title. Can be used before Block or List View
BlockHeader - extra header element. Can be used both inside and outside of block elements
BlockFooter - extra footer element. Can be used both inside and outside of block elements

Block Props

Name	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 `strong`
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

BlockTitle Props

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

BlockHeader Props

Name	Type	Default	Description
component	string	'div'	Component's HTML Element

BlockFooter Props

Name	Type	Default	Description
component	string	'div'	Component's HTML Element

Examples

ContentBlock.jsx

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Block,
  BlockFooter,
  BlockHeader,
  BlockTitle,
} from 'konsta/react';

export default function ContentBlockPage() {
  return (
    <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 quam
          mollis, 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 quam
          mollis, 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 quam
          mollis, 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 quam
          mollis, 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 quam
          mollis, 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 quam
          mollis, vulputate turpis vel, sagittis felis.
        </p>
      </Block>
    </Page>
  );
}