---
isPage: true
draft: false
title: Figure
description: Add image block with legend and credits, 4 widths available
icon: image
hero:
  surtitle: Blocks
  title: Block figure
  text: Add image block with legend and credits, 4 widths available.
  ctas:
    - text: Documentation
      url: https://www.hugolify.io/docs/blocks/figure/
      blank: true
    - text: Page code on Github
      url: https://raw.githubusercontent.com/Hugolify/hugolify-example-blocks/refs/heads/main/content/docs/figure.md
      blank: true
      link: true
  ui:
    align: center
    theme: light
blocks:
  - type: figure
    ui:
      grid: small
      offset: start
    heading:
      surtitle: Grid small
    figure:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
      legend: Figure (small)
      credit: Photo de [Anders Jildén](https://unsplash.com/fr/@andersjilden?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) sur [Unsplash](https://unsplash.com/)
  - type: figure
    ui:
      grid: small
      offset: center
    heading:
      surtitle: Grid small / Offset center
    figure:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
      legend: Figure (small)
      credit: Photo de [Anders Jildén](https://unsplash.com/fr/@andersjilden?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) sur [Unsplash](https://unsplash.com/)
  - type: figure
    ui:
      grid: small
      offset: end
    heading:
      surtitle: Grid small / Offset end
    figure:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
      legend: Figure (small)
      credit: Photo de [Anders Jildén](https://unsplash.com/fr/@andersjilden?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) sur [Unsplash](https://unsplash.com/)
  - type: figure
    ui:
      grid: medium
      offset: center
    heading:
      surtitle: Grid medium
    figure:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
      legend: Figure (medium)
      credit: Photo de [Anders Jildén](https://unsplash.com/fr/@andersjilden?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) sur [Unsplash](https://unsplash.com/)
  - type: figure
    ui:
      grid: large
      offset: center
    heading:
      surtitle: Grid large
    figure:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
      legend: Figure (large)
      credit: Photo de [Anders Jildén](https://unsplash.com/fr/@andersjilden?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) sur [Unsplash](https://unsplash.com/)
  - type: figure
    ui:
      grid: container
    heading:
      surtitle: Grid container
      title: Semper urna enim, viverra faucibus tellus bibendum sed
    figure:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
      legend: Figure (container)
      credit: Photo de [Anders Jildén](https://unsplash.com/fr/@andersjilden?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) sur [Unsplash](https://unsplash.com/)
  - type: figure
    ui:
      grid: full
    heading:
      surtitle: Grid full
      title: Semper urna enim, viverra faucibus tellus bibendum sed
    figure:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
      legend: Figure (full)
      credit: Photo de [Anders Jildén](https://unsplash.com/fr/@andersjilden?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) sur [Unsplash](https://unsplash.com/)
  - type: figure
    ui:
      grid: large
      offset: center
    heading:
      surtitle: Grid large / Offset center
      title: Semper urna enim, viverra faucibus tellus bibendum sed
    figure:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
      screenshot: true
      legend: Screenshot

  - type: figure
    ui:
      grid: small
      offset: center
      theme: light
    heading:
      surtitle: Grid small / Theme light
    figure:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
      legend: Figure (small)
      credit: Photo de [Anders Jildén](https://unsplash.com/fr/@andersjilden?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) sur [Unsplash](https://unsplash.com/)

  - type: figure
    ui:
      grid: small
      offset: center
      theme: highlight
    heading:
      surtitle: Grid small / Theme highlight
    figure:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
      legend: Figure (small)
      credit: Photo de [Anders Jildén](https://unsplash.com/fr/@andersjilden?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) sur [Unsplash](https://unsplash.com/)

  - type: figure
    ui:
      grid: small
      offset: center
      theme: accent
    heading:
      surtitle: Grid small / Theme accent
    figure:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
      legend: Figure (small)
      credit: Photo de [Anders Jildén](https://unsplash.com/fr/@andersjilden?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) sur [Unsplash](https://unsplash.com/)

  - type: figure
    ui:
      grid: small
      offset: center
      theme: dark
    heading:
      surtitle: Grid small / Theme dark
    figure:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
      legend: Figure (small)
      credit: Photo de [Anders Jildén](https://unsplash.com/fr/@andersjilden?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) sur [Unsplash](https://unsplash.com/)

  - type: figure
    ui:
      grid: small
      offset: center
      theme: neutral
    heading:
      surtitle: Grid small / Theme neutral
    figure:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
      legend: Figure (small)
      credit: Photo de [Anders Jildén](https://unsplash.com/fr/@andersjilden?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) sur [Unsplash](https://unsplash.com/)

  - type: figure
    ui:
      grid: small
      offset: center
      theme: black
    heading:
      surtitle: Grid small / Theme black
    figure:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
      legend: Figure (small)
      credit: Photo de [Anders Jildén](https://unsplash.com/fr/@andersjilden?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) sur [Unsplash](https://unsplash.com/)

  - type: figure
    ui:
      grid: small
      offset: center
      theme: white
    heading:
      surtitle: Grid small / Theme white
    figure:
      src: https://res.cloudinary.com/uncinq/image/upload/v1782294171/anders-jilden-Sc5RKXLBjGg-unsplash_rafux6.jpg
      legend: Figure (small)
      credit: Photo de [Anders Jildén](https://unsplash.com/fr/@andersjilden?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) sur [Unsplash](https://unsplash.com/)
---