Block React Component

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

Block Components
Block Props
BlockTitle Props
BlockHeader Props
BlockFooter Props
Examples

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.outlineIos	string	'border-black/20 dark:border-white/15'
colors.outlineMaterial	string	'border-md-light-outline border-md-dark-outline'
colors.strongBgIos	string	`bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.strongBgMaterial	string	'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
colors.textIos	string	'''
colors.textMaterial	string	'text-md-light-on-surface dark:text-md-dark-on-surface'
component	string	'div'	Component's HTML Element
inset	boolean	undefined	Makes block inset. Overwrites
insetIos	boolean	false	Makes block inset in iOS theme
insetMaterial	boolean	false	Makes block inset in Material theme
nested	boolean	false	Removes hairlines and margins, useful for case nesting block within other blocks
outline	boolean	undefined	Makes block outline. Overwrites
outlineIos	boolean	false	Makes block outline in iOS theme
outlineMaterial	boolean	false	Makes block outline in Material theme
strong	boolean	undefined	Adds extra highlighting and padding block content. Overwrites
strongIos	boolean	false	Adds extra highlighting and padding block content in iOS theme
strongMaterial	boolean	false	Adds extra highlighting and padding block content in Material theme

BlockTitle Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.largeTextIos	string	'text-black dark:text-white'
colors.largeTextMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
colors.mediumTextIos	string	'text-black dark:text-white'
colors.mediumTextMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
colors.textIos	string	'text-black/60 dark:text-white/60'
colors.textMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
component	string	'div'	Component's HTML Element
large	boolean	false	Large sized block title
medium	boolean	false	Medium sized block title

BlockHeader Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.textIos	string	'text-black/60 dark:text-white/60'
colors.textMaterial	string	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
component	string	'div'	Component's HTML Element
inset	boolean	undefined	Makes block header inset, overwrites
insetIos	boolean	false	Makes block header inset in iOS theme
insetMaterial	boolean	false	Makes block header inset in Material theme

BlockFooter Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.textIos	string	'text-black/60 dark:text-white/60'
colors.textMaterial	string	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
component	string	'div'	Component's HTML Element
inset	boolean	undefined	Makes block footer inset, overwrites
insetIos	boolean	false	Makes block footer inset in iOS theme
insetMaterial	boolean	false	Makes block footer inset in Material theme

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"
        />

      <BlockTitle>Block Title</BlockTitle>
      <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>Strong Block</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>Strong Outline Block</BlockTitle>
      <Block strong outline>
        <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>Strong 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>

      <BlockTitle>Strong Inset Outline Block</BlockTitle>
      <Block strong inset outline>
        <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 outline>
        <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 medium>Medium Title</BlockTitle>
      <Block strong outline>
        <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 large>Large Title</BlockTitle>
      <Block strong outline>
        <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>
  );
}

Block React Component

Contents

Block Components

Block Props

BlockTitle Props

BlockHeader Props

BlockFooter Props

Examples