Block React Component

Block Components
Block Properties
Examples

Block React component represents Block / 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 Properties

Prop	Type	Description
<Block> properties
inset	boolean	Makes block inset
xsmallInset	boolean	Makes block inset when app width >= 480px
smallInset	boolean	Makes block inset when app width >= 568px
mediumInset	boolean	Makes block inset when app width >= 768px
largeInset	boolean	Makes block inset when app width >= 1024px
xlargeInset	boolean	Makes block inset when app width >= 1200px
strong	boolean	Adds extra highlighting and padding block content
accordionList	boolean	Makes block wrapper for accordion items
tabs	boolean	Adds additional "tabs" class to make the block tabs wrapper
tab	boolean	Adds additional "tab" class when block should be used as a Tab
tabActive	boolean	Adds additional "tab-active" class when block used as a Tab and makes it active tab
noHairlines	boolean	Removes outer hairlines
noHairlinesMd	boolean	Removes outer hairlines for MD theme
noHairlinesIos	boolean	Removes outer hairlines for iOS theme
noHairlinesAurora	boolean	Removes outer hairlines for Aurora theme
<BlockTitle> properties
medium	boolean	Makes block title medium size
large	boolean	Makes block title large size

Examples

import React from 'react';
import {
  Page,
  Navbar,
  Block,
  BlockTitle,
  BlockHeader,
  BlockFooter,
} from 'framework7-react';

export default () => (
  
    
  <Page>
    <Navbar title="Content Block"></Navbar>
    <p>
      This paragraph is outside of content block. Not cool, but useful for any custom elements
      with custom styling.
    </p>

    <Block>
      <p>
        Here comes paragraph within content block. 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>

    <Block strong>
      <p>
        Here comes another text block with additional "block-strong" class. Praesent nec
        imperdiet diam. Maecenas vel lectus porttitor, consectetur magna nec, viverra sem.
        Aliquam sed risus dolor. Morbi tincidunt ut libero id sodales. Integer blandit varius
        nisi quis consectetur.{' '}
      </p>
    </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>Another ultra long content 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>Inset</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>Tablet Inset</BlockTitle>
    <Block strong mediumInset>
      <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>
    <Block>
      <BlockHeader>Block Header</BlockHeader>
      <p>
        Here comes paragraph within content block. 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>
      <BlockFooter>Block Footer</BlockFooter>
    </Block>

    <BlockHeader>Block Header</BlockHeader>
    <Block>
      <p>
        Here comes paragraph within content block. 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>Block Footer</BlockFooter>

    <Block strong>
      <BlockHeader>Block Header</BlockHeader>
      <p>
        Here comes paragraph within content block. 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>
      <BlockFooter>Block Footer</BlockFooter>
    </Block>

    <BlockHeader>Block Header</BlockHeader>
    <Block strong>
      <p>
        Here comes paragraph within content block. 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>Block Footer</BlockFooter>

    <BlockTitle large>Block Title Large</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 medium>Block Title Medium</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>
  </Page>
    
  
);