---
isPage: true
draft: false
title: Editorial
description: Add section with content (texts and buttons) and media
icon: id-card
hero:
  surtitle: Blocks
  title: Block editorial
  text: Add section with content (texts and buttons) and media.
  ctas:
    - text: Documentation
      url: https://www.hugolify.io/docs/blocks/editorial/
      blank: true
    - text: Page code on Github
      url: https://raw.githubusercontent.com/Hugolify/hugolify-example-blocks/refs/heads/main/content/docs/editorial.md
      blank: true
      link: true
  ui:
    align: center
    theme: light
blocks:

  # Classic
  - type: editorial
    ui:
      grid: container
      direction: ltr
    ctas:
      - blank: false
        text: Button
        url: "#"
    surtitle: Direction ltr / Grid container
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: >-
      Phasellus **tellus** purus, pellentesque eu velit vel, faucibus maximus
      nunc.


      Donec ut eros sit amet ipsum pulvinar sagittis.
    image:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
  - type: editorial
    ui:
      grid: container
      direction: rtl
    ctas:
      - blank: false
        text: Button
        url: "#"
    surtitle: Direction rtl / Grid container
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: >-
      Phasellus **tellus** purus, pellentesque eu velit vel, faucibus maximus
      nunc.


      Donec ut eros sit amet ipsum pulvinar sagittis.
    image:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
  
  # Grid
  - type: editorial
    ui:
      grid: small
      offset: center
      direction: ltr
    surtitle: Direction ltr / Grid small / Offset center
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: Phasellus **tellus** purus, pellentesque eu velit vel, faucibus maximus nunc.
    image:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
  - type: editorial
    ui:
      grid: medium
      offset: center
      direction: ltr
    surtitle: Direction ltr / Grid medium / Offset center
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: Phasellus **tellus** purus, pellentesque eu velit vel, faucibus maximus nunc.
    image:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
  - type: editorial
    ui:
      grid: large
      offset: center
      direction: ltr
    surtitle: Direction ltr / Grid large / Offset center
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: Phasellus **tellus** purus, pellentesque eu velit vel, faucibus maximus nunc.
    image:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
  - type: editorial
    ui:
      grid: container
      direction: ltr
    surtitle: Direction ltr / Grid container
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: Phasellus **tellus** purus, pellentesque eu velit vel, faucibus maximus nunc.
    image:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg

  - type: editorial
    ui:
      grid: full
      offset: center
      direction: ltr
    surtitle: Direction ltr / Grid full / Offset center
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: Phasellus **tellus** purus, pellentesque eu velit vel, faucibus maximus nunc.
    image:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
  - type: editorial
    ui:
      grid: full
      offset: center
      direction: rtl
    surtitle: Direction rtl / Grid full / Offset center
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: Phasellus **tellus** purus, pellentesque eu velit vel, faucibus maximus nunc.
    image:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg

  # Theme
  - type: editorial
    ui:
      grid: container
      direction: rtl
      theme: accent
    surtitle: Direction rtl / Grid container / Theme accent
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: Phasellus **tellus** purus, pellentesque eu velit vel, faucibus maximus nunc.
    image:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
    ctas:
      - blank: false
        text: Button
        url: "#"
  - type: editorial
    ui:
      grid: container
      direction: rtl
      theme: dark
    surtitle: Direction rtl / Grid container / Theme dark
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: Phasellus **tellus** purus, pellentesque eu velit vel, faucibus maximus nunc.
    image:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
    ctas:
      - blank: false
        text: Button
        url: "#"
  - type: editorial
    ui:
      grid: container
      direction: rtl
      theme: light
    surtitle: Direction rtl / Grid container / Theme light
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: Phasellus **tellus** purus, pellentesque eu velit vel, faucibus maximus nunc.
    image:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
    ctas:
      - blank: false
        text: Button
        url: "#"
  - type: editorial
    ui:
      grid: container
      direction: rtl
      theme: highlight
    surtitle: Direction rtl / Grid container / Theme highlight
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: Phasellus **tellus** purus, pellentesque eu velit vel, faucibus maximus nunc.
    image:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
    ctas:
      - blank: false
        text: Button
        url: "#"
  - type: editorial
    ui:
      grid: container
      direction: rtl
      theme: black
    surtitle: Direction rtl / Grid container / Theme black
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: Phasellus **tellus** purus, pellentesque eu velit vel, faucibus maximus nunc.
    image:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
    ctas:
      - blank: false
        text: Button
        url: "#"
  - type: editorial
    ui:
      grid: container
      direction: rtl
      theme: white
    surtitle: Direction rtl / Grid container / Theme white
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: Phasellus **tellus** purus, pellentesque eu velit vel, faucibus maximus nunc.
    image:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
    ctas:
      - blank: false
        text: Button
        url: "#"

  - type: editorial
    ui:
      grid: container
      direction: rtl
      theme: neutral
    surtitle: Direction rtl / Grid container / Theme neutral
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: Phasellus **tellus** purus, pellentesque eu velit vel, faucibus maximus nunc.
    image:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
    ctas:
      - blank: false
        text: Button
        url: "#"
---