Early research preview — this project is an experiment and may change significantly.
Bloktastic

navigation

Footer

Multi-column footer with branding, navigation groups, legal text, and socials.

#footer#navigation#legal#links

Storyblok Schema

json

{
  "$bloktastic": {
    "version": "1.0.0"
  },
  "name": "footer",
  "display_name": "Footer",
  "is_root": false,
  "is_nestable": true,
  "schema": {
    "brand_name": {
      "type": "text",
      "pos": 0,
      "display_name": "Brand Name",
      "description": "Brand or company name",
      "required": true
    },
    "tagline": {
      "type": "text",
      "pos": 1,
      "display_name": "Tagline",
      "description": "Short footer tagline"
    },
    "link_columns": {
      "type": "textarea",
      "pos": 2,
      "display_name": "Link Columns",
      "description": "Define links as Column|Label|URL per line",
      "required": true
    },
    "copyright_text": {
      "type": "text",
      "pos": 3,
      "display_name": "Copyright Text",
      "description": "Legal footer line",
      "required": true
    },
    "show_social_links": {
      "type": "boolean",
      "pos": 4,
      "display_name": "Show Social Links",
      "default_value": true,
      "description": "Render social link icons"
    }
  },
  "preview_field": "brand_name"
}

Generation Prompt

md

# Footer

## Purpose
Multi-column footer with branding, navigation groups, legal text, and socials.

## Storyblok Schema Fields
- `brand_name` (text, required): Brand or company name
- `tagline` (text): Short footer tagline
- `link_columns` (textarea, required): Define links as Column|Label|URL per line
- `copyright_text` (text, required): Legal footer line
- `show_social_links` (boolean): Render social link icons

## Visual Requirements
- Design for responsive marketing pages (mobile, tablet, desktop).
- Keep spacing and hierarchy clear for conversion-focused sections.
- Support optional content gracefully without visual gaps.

## Accessibility
- Use semantic sectioning and heading structure.
- Ensure interactive elements are keyboard reachable with visible focus states.
- Maintain WCAG-compliant contrast in all supported styles.

## Example Props Structure
```typescript
interface FooterProps {
  // Map Storyblok fields to your frontend props here
}
```

## Edge Cases
- Missing optional media or links.
- Extremely long text content.
- Empty collections in nested blok fields.

README

md

# @bloktastic/footer

Multi-column footer with branding, navigation groups, legal text, and socials.

## Installation

```bash
bloktastic add @bloktastic/footer
```

## Fields

| Field | Type | Required | Description |
|---|---|---|---|
| brand_name | text | Yes | Brand or company name |
| tagline | text | No | Short footer tagline |
| link_columns | textarea | Yes | Define links as Column|Label|URL per line |
| copyright_text | text | Yes | Legal footer line |
| show_social_links | boolean | No | Render social link icons |

## Notes
- Category: `navigation`
- Tags: `footer`, `navigation`, `legal`, `links`