Composing content with Elements

June 2, 2026 · The Alchemy Team

How a page is assembled from reusable Elements, each made of typed Ingredients.

config/alchemy/elements.yml

- name: post_header
  unique: true
  hint: true
  ingredients:
    - role: headline
      type: Headline
      hint: true
      default: :post_header_headline
      settings:
        levels: [1, 2]
        sizes: [1, 2]
    - role: published_at
      type: Datetime
      hint: true
    - role: author
      type: Text
      hint: true
      default: :post_header_author
    - role: image
      type: Picture
      hint: true
      settings:
        crop: true
        fixed_ratio: true
        size: "800x450"
        srcset:
          - "400x225"
          - "800x450"
          - "1200x675"
        sizes:
          - "(min-width: 768px) 720px"
          - "100vw"
    - role: intro
      type: Richtext
      hint: true
      default: :post_header_intro
      settings:
        tinymce:
          toolbar: "bold italic | alchemy_link unlink"
        sanitizer:
          tags: [p, br, strong, em, a]
          attributes: [href, target, rel, title]

Edit this element in the admin →

Composing a page from Elements

A Page Layout lists which Elements a page may contain. This article page allows exactly two: a post_header and a prose block — the one you are reading now.

Each Element is defined once in config/alchemy/elements.yml and can be reused on any page. Editors then:

add and remove Elements,
sort and nest them,
fill in their typed Ingredients.

None of this layout is hard-coded into the page. The frontend renders every Element through its own view partial, so a prose block reads the same here as it does anywhere else on the site.

config/alchemy/elements.yml

- name: prose
  hint: true
  ingredients:
    - role: headline
      type: Headline
      hint: true
      default: :prose_headline
      settings:
        levels: [2, 3]
        sizes: [2, 3]
    - role: text
      type: Richtext
      hint: true
      default: :prose_text
      settings:
        tinymce:
          toolbar: "bold italic | bullist numlist | alchemy_link unlink"
        sanitizer:
          tags: [p, br, strong, em, a, ul, ol, li]
          attributes: [href, target, rel, title]

Edit this element in the admin →