---
isPage: true
draft: false
title: Figure
description: Add image block with legend and credits, 4 widths available
icon: card-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-site/refs/heads/main/content/docs/figure.md
      blank: true
blocks:
  - type: figure
    figure:
      src: /images/uploads/bertrand-borie-tmlculvqha0-unsplash.jpg
      legend: Figure (small)
      credit: Photo by [Bertrand
        Borie](https://unsplash.com/@bertrand1212?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
        on
        [Unsplash](https://unsplash.com/s/photos/cap-ferret?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
    grid: small
  - type: figure
    figure:
      src: /images/uploads/bertrand-borie-tmlculvqha0-unsplash.jpg
      legend: Figure (small)
      credit: Photo by [Bertrand
        Borie](https://unsplash.com/@bertrand1212?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
        on
        [Unsplash](https://unsplash.com/s/photos/cap-ferret?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
    grid: small
    offset: center
  - type: figure
    figure:
      src: /images/uploads/bertrand-borie-tmlculvqha0-unsplash.jpg
      legend: Figure (small)
      credit: Photo by [Bertrand
        Borie](https://unsplash.com/@bertrand1212?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
        on
        [Unsplash](https://unsplash.com/s/photos/cap-ferret?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
    grid: small
    offset: end
  - type: figure
    figure:
      src: /images/uploads/bertrand-bouchez-lrd26nd-awu-unsplash.jpg
      legend: Figure (medium)
      credit: Photo by [Bertrand
        Bouchez](https://unsplash.com/@dollyfilms?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
        on
        [Unsplash](https://unsplash.com/s/photos/cap-ferret?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
    grid: medium
  - type: figure
    figure:
      src: /images/uploads/robin-goutard-3evcj31p35q-unsplash.jpg
      legend: Figure (large)
      credit: Photo by [Robin
        Goutard](https://unsplash.com/es/@redsonly?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
        on
        [Unsplash](https://unsplash.com/s/photos/cap-ferret?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
    grid: large
  - type: figure
    heading:
      surtitle: Lorem ipsum dolor sit amet.
      title: Semper urna enim, viverra faucibus tellus bibendum sed
    figure:
      src: /images/uploads/yann-behr-qzugs6bpcr0-unsplash.jpg
      legend: Figure (full)
      credit: Photo by [yann
        behr](https://unsplash.com/@yannbehr?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
        on
        [Unsplash](https://unsplash.com/s/photos/cap-ferret?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
    grid: full
  - type: figure
    heading:
      surtitle: Lorem ipsum dolor sit amet.
      title: Semper urna enim, viverra faucibus tellus bibendum sed
    figure:
      src: /images/uploads/yann-behr-qzugs6bpcr0-unsplash.jpg
      legend: Figure (container)
      credit: Photo by [yann
        behr](https://unsplash.com/@yannbehr?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
        on
        [Unsplash](https://unsplash.com/s/photos/cap-ferret?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
    grid: container
  - type: figure
    heading:
      surtitle: Lorem ipsum dolor sit amet.
      title: Semper urna enim, viverra faucibus tellus bibendum sed
    figure:
      src: /images/uploads/demo-theme-3.png
      screenshot: true
      legend: Screenshot
    grid: large
    offset: center
---