---
url: https://plugin.stripo.email/extensions/reference/constants/BlockAttr.md
---
# BlockAttr

Configuration object defining supported attributes for different block types.

```typescript
const BlockAttr: {
  EMPTY_CONTAINER: EmptyContainerAttributes;
  CONTAINER: ContainerAttributes;
  BLOCK_IMAGE: ImageAttributes;
  BLOCK_BUTTON: ButtonAttributes;
}
```

## Description

`BlockAttr` provides a structured definition of attributes supported by various block types in the Stripo Email Editor. These attributes define the configurable properties that can be set on blocks, enabling dynamic behavior and customization. Each block type has its own set of relevant attributes that correspond to its functionality.

## Import

```typescript
import { BlockAttr } from '@stripoinc/ui-editor-extensions';
```

## Block Attribute Definitions

### CONTAINER

Attributes for container blocks.

```typescript
CONTAINER: {
  widthPercent: 'width-percent'
}
```

#### Attributes

| Attribute | Type | Description |
|-----------|------|-------------|
| widthPercent | `string` | Container width as percentage of structure width |

#### Usage Example

```typescript
getTemplate() {
    const {STRUCTURE, CONTAINER, BLOCK_TEXT, BLOCK_BUTTON} = BlockType;

    // Create a two-column structure:
    // - First column: 50% width containing a Text Block
    // - Second column: 50% width containing a Button Block
    return `
            <${STRUCTURE}>
                <${CONTAINER} ${BlockAttr.CONTAINER.widthPercent}="50">
                    <${BLOCK_TEXT}>
                        <p>Lorem ipsum dolor sit amet</p>
                    </${BLOCK_TEXT}>
                </${CONTAINER}>
                
                <${CONTAINER} ${BlockAttr.CONTAINER.widthPercent}="50">
                    <${BLOCK_BUTTON} ${BlockAttr.BLOCK_BUTTON.href}="https://stripo.email">
                        Click me
                    </${BLOCK_BUTTON}>
                </${CONTAINER}>
            </${STRUCTURE}>
        `
}
```

***

### EMPTY\_CONTAINER

Attributes for empty container blocks.

```typescript
EMPTY_CONTAINER: {
  widthPercent: 'width-percent',
  blocks: 'blocks'
}
```

#### Attributes

| Attribute | Type | Description                                                      |
|-----------|------|------------------------------------------------------------------|
| widthPercent | `string` | Container width as percentage of structure width                 |
| blocks | `string` | List of blocks ids available for insertion through quick actions |

#### Usage Example

```typescript
getTemplate() {
    const {STRUCTURE, EMPTY_CONTAINER, BLOCK_IMAGE, BLOCK_TEXT} = BlockType;

    // Specify block IDs that will appear as quick-add icons in the empty container        
    return `
            <${STRUCTURE}>
                <${EMPTY_CONTAINER} 
                    ${BlockAttr.EMPTY_CONTAINER.widthPercent}="100"
                    ${BlockAttr.EMPTY_CONTAINER.blocks}="${BLOCK_IMAGE}, ${BLOCK_TEXT}, simple-block">  
                </${EMPTY_CONTAINER}>
            </${STRUCTURE}>
        `
}
```

***

### BLOCK\_IMAGE

Attributes for image blocks.

```typescript
BLOCK_IMAGE: {
  src: 'src',
  alt: 'alt',
  href: 'href'
}
```

#### Attributes

| Attribute | Type | Description |
|-----------|------|-------------|
| src | `string` | Image URL |
| alt | `string` | Alternative text for accessibility |
| href | `string` | URL the image links to when clicked |

#### Usage Example

```typescript
getTemplate() {
    const {STRUCTURE, CONTAINER, BLOCK_IMAGE} = BlockType;

    return `
            <${STRUCTURE}>
                <${CONTAINER} ${BlockAttr.CONTAINER.widthPercent}="100">
                    <${BLOCK_IMAGE}
                        ${BlockAttr.BLOCK_IMAGE.src}="https://hpy.stripocdn.email/content/guids/CABINET_e5244175dd1729a1d6ee1f8bd0d5490f/images/50421523966142571.jpg"
                        ${BlockAttr.BLOCK_IMAGE.alt}="Lorem ipsum"
                        ${BlockAttr.BLOCK_IMAGE.href}="https://stripo.email">
                    </${BLOCK_IMAGE}>
                </${CONTAINER}>
            </${STRUCTURE}>
        `
}
```

***

### BLOCK\_BUTTON

Attributes for button blocks.

```typescript
BLOCK_BUTTON: {
  href: 'href'
}
```

#### Attributes

| Attribute | Type | Description |
|-----------|------|-------------|
| href | `string` | URL the button links to when clicked |

#### Usage Example

```typescript
getTemplate() {
    const {STRUCTURE, CONTAINER, BLOCK_BUTTON} = BlockType;

    return `
            <${STRUCTURE}>
                <${CONTAINER} ${BlockAttr.CONTAINER.widthPercent}="100">
                    <${BLOCK_BUTTON} ${BlockAttr.BLOCK_BUTTON.href}="https://stripo.email">
                        Click me
                    </${BLOCK_BUTTON}>
                </${CONTAINER}>
            </${STRUCTURE}>
        `
}
```