🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Block React Component

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

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.outlineIosstring'border-black border-opacity-20 dark:border-white dark:border-opacity-15'
colors.outlineMaterialstring'border-md-light-outline border-md-dark-outline'
colors.strongBgIosstring`bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.strongBgMaterialstring'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
colors.textIosstring'''
colors.textMaterialstring'text-md-light-on-surface dark:text-md-dark-on-surface'
componentstring'div'

Component's HTML Element

insetbooleanundefined

Makes block inset. Overwrites insetIos and insetMaterial props

insetIosbooleanfalse

Makes block inset in iOS theme

insetMaterialbooleanfalse

Makes block inset in Material theme

marginstring'my-8'

Tailwind CSS margin class

nestedbooleanfalse

Removes hairlines and margins, useful for case nesting block within other blocks

outlinebooleanundefined

Makes block outline. Overwrites outlineIos and outlineMaterial props

outlineIosbooleanfalse

Makes block outline in iOS theme

outlineMaterialbooleanfalse

Makes block outline in Material theme

paddingstring'py-4'

Tailwind CSS padding class

strongbooleanundefined

Adds extra highlighting and padding block content. Overwrites strongIos and strongMaterial props

strongIosbooleanfalse

Adds extra highlighting and padding block content in iOS theme

strongMaterialbooleanfalse

Adds extra highlighting and padding block content in Material theme

BlockTitle Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.textIosstring''
colors.textMaterialstring'text-md-light-primary dark:text-md-dark-primary'
componentstring'div'

Component's HTML Element

largebooleanfalse

Large sized block title

mediumbooleanfalse

Medium sized block title

withBlockbooleantrue

Useful to disable when there is no Block or List component right after the Block Title

BlockHeader Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.textIosstring'text-black dark:text-white'
colors.textMaterialstring'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
componentstring'div'

Component's HTML Element

insetbooleanundefined

Makes block header inset, overwrites insetIos and insetMaterial

insetIosbooleanfalse

Makes block header inset in iOS theme

insetMaterialbooleanfalse

Makes block header inset in Material theme

BlockFooter Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.textIosstring'text-black text-opacity-75 dark:text-white dark:text-opacity-75'
colors.textMaterialstring'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
componentstring'div'

Component's HTML Element

insetbooleanundefined

Makes block footer inset, overwrites insetIos and insetMaterial

insetIosbooleanfalse

Makes block footer inset in iOS theme

insetMaterialbooleanfalse

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>
);
}
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.