> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/5.block.md).

# Block

### Block Props <a href="#block-props" id="block-props"></a>

| 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 <a href="#blocktitle-props" id="blocktitle-props"></a>

| 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 <a href="#blockheader-props" id="blockheader-props"></a>

| 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 <a href="#blockfooter-props" id="blockfooter-props"></a>

| 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

{% tabs %} {% tab title="Vue" %} \`

\`\`typescript\
&#x20; import {\
&#x20;   iPage,\
&#x20;   iNavbar,\
&#x20;   iNavbarBackLink,\
&#x20;   iBlock,\
&#x20;   iBlockFooter,\
&#x20;   iBlockHeader,\
&#x20;   iBlockTitle,\
&#x20; } from 'ina-ui/vue';\
export default {\
components: {\
iPage,\
iNavbar,\
iNavbarBackLink,\
iBlock,\
iBlockFooter,\
iBlockHeader,\
iBlockTitle,\
},

};

````

</div>

<div data-gb-custom-block data-tag="tab" data-title='React'>

```js
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>
  );
}
````


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/5.block.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.