Skip to main content

POS block

The POS block component creates a container to place content with an action button. Use it to display structured content within POS block targets.

The component provides a standardized layout specifically designed for content blocks within POS detail views, with consistent padding, spacing, and optional action buttons.

Support
Targets (14)

Supported targets

Anchor to PropertiesProperties

Displays content in a POS block container with optional heading.

Anchor to heading
heading
string

The heading to display within the POSBlock.

If not provided, the description of the extension will be used when a heading is appropriate.

Anchor to id
id
string

A unique identifier for the element.

Anchor to SlotsSlots

The POS block component supports slots for additional content placement within the block. Learn more about using slots.

Anchor to secondary-actions
secondary-actions
HTMLElement

The secondary actions to perform, provided as button or link type elements.

Anchor to ExamplesExamples

Anchor to Create a content block with an action buttonCreate a content block with an action button

Create structured content blocks using a POS block component with optional action buttons. This example shows a basic block with content and an action button.

Create a content block with an action button

Create structured content blocks using a POS block component with optional action buttons. This example shows a basic block with content and an action button.

Create a content block with an action button

<s-pos-block>
<s-box paddingBlock="base">
<s-text>Customer Loyalty</s-text>
</s-box>
</s-pos-block>

Anchor to Best practicesBest practices

  • Provide descriptive headings: If you don't specify a heading, the system uses your extension's description, so ensure it's meaningful and concise.
  • Place important actions in secondary-actions slot: Include only the most relevant actions directly related to your block's content.
  • Limit secondary actions: To maintain clean, focused interfaces that don't overwhelm the existing POS workflow, use only one secondary action element in each block.
Was this page helpful?