Block (deprecated)

Deprecated, NOT allowed for generation. Do not use this component when generating OTTO apps, pages or PDFs.

API from Storybook controls (BlockV1.stories.ts)

No generated API page exists for this component; these are the documented controls (argTypes).

Overview

Source: ./src/css-only-components/block/Block.mdx

Block

Important

This is a deprecated version of the block component. For the latest version, see the updated component documentation. Refer to this migration guide to update your project to the latest version.

Default variation

Default

Story: css-only-components-block-deprecated-variations--default · tags: components

The Default configuration has horizontal and vertical padding.

<div class="oc-block-v1"></div>

Args: content=<oc-placeholder-v1 class="oc-headline-100 oc-m-0" variant="text">PLACEHOLDER</oc-placeholder-v1>

<div class="oc-block-v1"><oc-placeholder-v1 class="oc-headline-100 oc-m-0" variant="text">PLACEHOLDER</oc-placeholder-v1></div>

{
  name: "Default",
  render: args => {
    return html`<div class="oc-block-v1">${unsafeHTML(args.content)}</div>`;
  },
  args: {
    content: placeholder
  }
}

Configuration

Explore all available configuration options in the component configurator and see the changes affect the component in real-time. Additionally, you can configure the block component by applying custom CSS classes and styles to adjust its layout, spacing, and appearance.

Usage guidelines

Visit the variations page for examples of different block configurations and use cases.

Info

See the Block UX documentation for detailed user experience guidelines.

Accessibility

The block component is a presentational container and does not include interactive features. Ensure that any content placed inside the block is accessible and follows best practices for semantic HTML and ARIA attributes.

Visit the accessibility documentation for general guidelines on making your content accessible.

Configuration

Source: ./src/css-only-components/block/Configuration.mdx

Block configuration

Configure the block component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

Story Default:

<div class="oc-block-v1"><oc-placeholder-v1 class="oc-headline-100 oc-m-0" variant="text">PLACEHOLDER</oc-placeholder-v1></div>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

Variations

Source: ./src/css-only-components/block/Variations.mdx

Variations

Listed below are the most common variations of the block component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Default

Story Default:

<div class="oc-block-v1"><oc-placeholder-v1 class="oc-headline-100 oc-m-0" variant="text">PLACEHOLDER</oc-placeholder-v1></div>

Demo: Full bleed

Demo: Full bleed

Story: css-only-components-block-deprecated-variations--demo-full-bleed · tags: components

The full-bleed Variation using the oc-px-0 class to remove horizontal padding.

<div class="oc-block-v1 oc-px-0"></div>

Args: content=<oc-placeholder-v1 class="oc-headline-100 oc-m-0" variant="text">PLACEHOLDER</oc-placeholder-v1>

<div class="oc-block-v1 oc-px-0"><oc-placeholder-v1 class="oc-headline-100 oc-m-0" variant="text">PLACEHOLDER</oc-placeholder-v1></div>

{
  name: "Demo: Full bleed",
  render: args => {
    return html`<div class="oc-block-v1 oc-px-0">${unsafeHTML(args.content)}</div>`;
  },
  args: {
    content: placeholder
  }
}

Demo: No padding

Demo: No padding

Story: css-only-components-block-deprecated-variations--demo-no-padding · tags: components

Variation using the oc-p-0 class to remove all padding.

<div class="oc-block-v1 oc-p-0"></div>

Args: content=<oc-placeholder-v1 class="oc-headline-100 oc-m-0" variant="text">PLACEHOLDER</oc-placeholder-v1>

<div class="oc-block-v1 oc-p-0"><oc-placeholder-v1 class="oc-headline-100 oc-m-0" variant="text">PLACEHOLDER</oc-placeholder-v1></div>

{
  name: "Demo: No padding",
  render: args => {
    return html`<div class="oc-block-v1 oc-p-0">${unsafeHTML(args.content)}</div>`;
  },
  args: {
    content: placeholder
  }
}