Block

Block Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.outlineIos	string	'border-black border-opacity-20 dark:border-white dark:border-opacity-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 and insetMaterial props
insetIos	boolean	false	Makes block inset in iOS theme
insetMaterial	boolean	false	Makes block inset in Material theme
margin	string	'my-8'	Tailwind CSS margin class
nested	boolean	false	Removes hairlines and margins, useful for case nesting block within other blocks
outline	boolean	undefined	Makes block outline. Overwrites outlineIos and outlineMaterial props
outlineIos	boolean	false	Makes block outline in iOS theme
outlineMaterial	boolean	false	Makes block outline in Material theme
padding	string	'py-4'	Tailwind CSS padding class
strong	boolean	undefined	Adds extra highlighting and padding block content. Overwrites strongIos and strongMaterial props
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.textIos	string	''
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
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
colors	object		Object with Tailwind CSS colors classes
colors.textIos	string	'text-black dark:text-white'
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 and insetMaterial
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 text-opacity-75 dark:text-white dark:text-opacity-75'
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 and insetMaterial
insetIos	boolean	false	Makes block footer inset in iOS theme
insetMaterial	boolean	false	Makes block footer inset in Material theme

Examples

Vue

<template>
  <i-page>
    <i-navbar title="Content Block" />

    <i-block-title>Block Title</i-block-title>
    <i-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>
    </i-block>
    <i-block-title>Strong Block</i-block-title>
    <i-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>
    </i-block>
    <i-block-title>Strong Outline Block</i-block-title>
    <i-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>
    </i-block>

    <i-block-title>Strong Inset Block</i-block-title>
    <i-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>
    </i-block>

    <i-block-title>Strong Inset Outline Block</i-block-title>
    <i-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>
    </i-block>
    <i-block-title>With Header & Footer</i-block-title>
    <i-block-header>Header</i-block-header>
    <i-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>
    </i-block>
    <i-block-footer>Footer</i-block-footer>
    <i-block-title medium>Medium Title</i-block-title>
    <i-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>
    </i-block>
    <i-block-title large>Large Title</i-block-title>
    <i-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>
    </i-block>
  </i-page>
</template>
<script>
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iBlock,
    iBlockFooter,
    iBlockHeader,
    iBlockTitle,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iBlock,
      iBlockFooter,
      iBlockHeader,
      iBlockTitle,
    },

  };
</script>

React

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Block,
  BlockFooter,
  BlockHeader,
  BlockTitle,
} from 'ina-ui/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>
  );
}