---
isPage: true
draft: false
title: Paragraph
description: Add title and some text, 4 widths and 3 alignments available
icon: text-align-start
hero:
  surtitle: Blocks
  title: Block paragraph
  text: Add title and some text, 4 widths and 3 alignments available.
  ctas:
    - text: Documentation
      url: https://www.hugolify.io/docs/blocks/paragraph/
      blank: true
    - text: Page code on Github
      url: https://raw.githubusercontent.com/Hugolify/hugolify-example-site/refs/heads/main/content/docs/paragraph.md
      blank: true
blocks:
  - type: paragraph
    background: false
    grid: small
    title: Paragraph (small)
    text:
      Curabitur nec ipsum sit amet tellus *sagittis* blandit. Nulla massa nibh,
      cursus a arcu et, viverra sodales ipsum. Duis id congue metus. In commodo
      lectus ut **ligula elementum**, ac commodo tortor rhoncus. Vivamus
      sollicitudin eu magna sed interdum. Mauris lobortis pulvinar lectus at
      semper. Proin ac nunc urna. In placerat lorem ut tempus interdum. Maecenas
      nec iaculis lorem.
  - type: paragraph
    background: false
    grid: small
    offset: center
    title: Paragraph (small, offset center)
    text: Curabitur nec ipsum [*] sit amet tellus sagittis blandit. Nulla massa nibh, cursus a arcu et, viverra sodales ipsum. Duis id congue metus. In commodo lectus ut ligula elementum, ac commodo tortor rhoncus. Vivamus sollicitudin eu magna sed interdum [*]. Mauris lobortis pulvinar lectus at semper. Proin ac nunc urna. In placerat lorem ut tempus interdum. Maecenas nec iaculis lorem.
    ctas:
      - blank: false
        url: '#'
        text: Button
    notes:
      - text: Proin ac nunc urna. In placerat lorem ut tempus interdum. Maecenas nec iaculis lorem.
      - text: Vivamus sollicitudin eu magna sed interdum.
  - type: paragraph
    background: false
    grid: small
    offset: end
    title: Paragraph (small, offset end)
    text:
      Curabitur nec ipsum sit amet tellus sagittis blandit. Nulla massa nibh,
      cursus a arcu et, viverra sodales ipsum. Duis id congue metus. In commodo
      lectus ut ligula elementum, ac commodo tortor rhoncus. Vivamus
      sollicitudin eu magna sed interdum. Mauris lobortis pulvinar lectus at
      semper. Proin ac nunc urna. In placerat lorem ut tempus interdum. Maecenas
      nec iaculis lorem.
  - type: paragraph
    background: false
    grid: small
    offset: center
    align: center
    title: Paragraph (small, offset center, align center)
    text:
      Curabitur nec ipsum sit amet tellus sagittis blandit. Nulla massa nibh,
      cursus a arcu et, viverra sodales ipsum. **Duis id congue metus.** In commodo
      lectus ut ligula elementum, ac commodo tortor rhoncus. Vivamus
      sollicitudin eu magna sed interdum. Mauris lobortis pulvinar lectus at
      semper. Proin ac nunc urnat. In placerat lorem ut tempus interdum. Maecenas
      nec iaculis lorem.
  - type: paragraph
    background: false
    grid: medium
    title: Paragraph with notes (medium, offset start)
    text:
      Curabitur nec ipsum sit amet tellus sagittis blandit[*]. Nulla massa nibh,
      cursus a arcu et, viverra sodales ipsum. Duis id congue metus. In commodo
      lectus ut ligula elementum, ac commodo tortor rhoncus. Vivamus
      sollicitudin eu magna sed interdum. Mauris lobortis pulvinar[*] lectus at
      semper. Proin ac nunc urna. **In placerat** lorem ut tempus interdum. Maecenas
      nec iaculis lorem.
    notes: 
      - id: 1
        text: Mauris lobortis pulvinar lectus at semper.
      - id: 2
        text: Proin ac nunc urna. In placerat lorem ut tempus interdum. Maecenas nec iaculis lorem.
  - type: paragraph
    background: false
    grid: medium
    offset: center
    title: Paragraph (medium, offset center)
    text:
      Curabitur nec ipsum sit amet tellus sagittis blandit. Nulla massa nibh,
      cursus a arcu et, viverra sodales ipsum. Duis id congue metus. In commodo
      lectus ut ligula elementum, ac commodo tortor rhoncus. Vivamus
      sollicitudin eu magna sed interdum. Mauris lobortis pulvinar lectus at
      semper. Proin ac nunc urna. In placerat lorem ut tempus interdum. Maecenas
      nec iaculis lorem.
  - type: paragraph
    background: true
    grid: medium
    align: center
    offset: center
    title: Paragraph (medium, center, align center)
    text:
      Curabitur nec ipsum sit amet tellus sagittis blandit. Nulla massa nibh,
      cursus a arcu et, viverra sodales ipsum. Duis id congue metus. In commodo
      lectus ut ligula elementum, ac commodo tortor rhoncus. Vivamus
      sollicitudin eu magna sed interdum. Mauris lobortis pulvinar lectus at
      semper. Proin ac nunc urna. In placerat lorem ut tempus interdum. Maecenas
      nec iaculis lorem.
  - type: paragraph
    background: false
    grid: medium
    offset: end
    title: Paragraph (medium, end)
    text:
      Curabitur nec ipsum sit amet tellus sagittis blandit. Nulla massa nibh,
      cursus a arcu et, viverra sodales ipsum. Duis id congue metus. In commodo
      lectus ut ligula elementum, ac commodo tortor rhoncus. Vivamus
      sollicitudin eu magna sed interdum. Mauris lobortis pulvinar lectus at
      semper. Proin ac nunc urna. In placerat lorem ut tempus interdum. Maecenas
      nec iaculis lorem.
  - type: paragraph
    background: false
    grid: large
    title: Paragraph
    text:
      Curabitur nec ipsum sit amet tellus sagittis blandit. Nulla massa nibh,
      cursus a arcu et, viverra sodales ipsum. Duis id congue metus. In commodo
      lectus ut ligula elementum, ac commodo tortor rhoncus. Vivamus
      sollicitudin eu magna sed interdum. Mauris lobortis pulvinar lectus at
      semper. Proin ac nunc urna. In placerat lorem ut tempus interdum. Maecenas
      nec iaculis lorem.
  - type: paragraph
    background: false
    grid: large
    offset: center
    title: Paragraph
    text:
      Curabitur nec ipsum sit amet tellus sagittis blandit. Nulla massa nibh,
      cursus a arcu et, viverra sodales ipsum. Duis id congue metus. In commodo
      lectus ut ligula elementum, ac commodo tortor rhoncus. Vivamus
      sollicitudin eu magna sed interdum. Mauris lobortis pulvinar lectus at
      semper. Proin ac nunc urna. In placerat lorem ut tempus interdum. Maecenas
      nec iaculis lorem.
  - type: paragraph
    background: false
    grid: large
    offset: end
    title: Paragraph (large, offset end)
    text:
      Curabitur nec ipsum sit amet tellus sagittis blandit. Nulla massa nibh,
      cursus a arcu et, viverra sodales ipsum. Duis id congue metus. In commodo
      lectus ut ligula elementum, ac commodo tortor rhoncus. Vivamus
      sollicitudin eu magna sed interdum. Mauris lobortis pulvinar lectus at
      semper. Proin ac nunc urna. In placerat lorem ut tempus interdum. Maecenas
      nec iaculis lorem.
  - type: paragraph
    background: false
    grid: container
    title: Paragraph (container)
    text:
      Curabitur nec ipsum sit amet tellus sagittis blandit. Nulla massa nibh,
      cursus a arcu et, viverra sodales ipsum. Duis id congue metus. In commodo
      lectus ut ligula elementum, ac commodo tortor rhoncus. Vivamus
      sollicitudin eu magna sed interdum. Mauris lobortis pulvinar lectus at
      semper. Proin ac nunc urna. In placerat lorem ut tempus interdum. Maecenas
      nec iaculis lorem.

  #  Theme
  - type: paragraph
    background: false
    grid: medium
    theme: accent
    title: Paragraph (medium, offset start, theme accent)
    text:
      Curabitur nec ipsum [*] sit amet tellus sagittis blandit. Nulla massa nibh,
      cursus a arcu et, viverra sodales ipsum. Duis id congue metus. In commodo
      lectus ut ligula elementum, ac commodo tortor rhoncus. Vivamus
      sollicitudin eu magna sed interdum. Mauris lobortis pulvinar lectus at
      semper. Proin ac nunc urna. In placerat lorem ut tempus interdum. Maecenas
      nec iaculis lorem.
    ctas:
      - blank: false
        url: '#'
        text: Button
      - blank: false
        url: '#'
        text: Button
    notes:
      - text: "C. Poliquin fut un éminent spécialiste canadien du développement de la
          force, auteur de nombreux ouvrages dont The Poliquin Principles -
          1997, 2006"
  - type: paragraph
    background: false
    grid: medium
    offset: center
    theme: dark
    title: Paragraph (medium, offset center, theme dark)
    text:
      Curabitur nec ipsum [*] sit amet tellus sagittis blandit. Nulla massa nibh,
      cursus a arcu et, viverra sodales ipsum. Duis id congue metus. In commodo
      lectus ut ligula elementum, ac commodo tortor rhoncus. Vivamus
      sollicitudin eu magna sed interdum. Mauris lobortis pulvinar lectus at
      semper. Proin ac nunc urna. In placerat lorem ut tempus interdum. Maecenas
      nec iaculis lorem.
    ctas:
      - blank: false
        url: '#'
        text: Button
      - blank: false
        url: '#'
        text: Button
    notes:
      - text: "C. Poliquin fut un éminent spécialiste canadien du développement de la
          force, auteur de nombreux ouvrages dont The Poliquin Principles -
          1997, 2006"
  - type: paragraph
    background: false
    grid: medium
    offset: end
    theme: light
    title: Paragraph (medium, offset end, theme light)
    text:
      Curabitur nec ipsum [*] sit amet tellus sagittis blandit. Nulla massa nibh,
      cursus a arcu et, viverra sodales ipsum. Duis id congue metus. In commodo
      lectus ut ligula elementum, ac commodo tortor rhoncus. Vivamus
      sollicitudin eu magna sed interdum. Mauris lobortis pulvinar lectus at
      semper. Proin ac nunc urna. In placerat lorem ut tempus interdum. Maecenas
      nec iaculis lorem.
    ctas:
      - blank: false
        url: '#'
        text: Button
      - blank: false
        url: '#'
        text: Button
    notes:
      - text: "C. Poliquin fut un éminent spécialiste canadien du développement de la
          force, auteur de nombreux ouvrages dont The Poliquin Principles -
          1997, 2006"
---