---
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-blocks/refs/heads/main/content/docs/paragraph.md
      blank: true
      link: true
  ui:
    align: center
    theme: light
      
blocks:

  - type: paragraph
    ui:
      grid: container
    surtitle: Grid container / No theme
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: >-
      Quisque eget magna nec nunc scelerisque posuere nec at eros. Nulla
      placerat ipsum pulvinar mauris lacinia, vel consectetur sem
      ullamcorper. Pellentesque nec nisi nunc. Fusce commodo vehicula tortor,
      sed convallis purus posuere a. Proin ullamcorper, elit in cursus
      facilisis, nulla neque convallis libero, nec aliquet lorem ante non
      eros. Sed convallis enim placerat volutpat molestie. Etiam dictum dictum
      purus, vitae sagittis urna condimentum quis.
      

      Aliquam mattis sapien vitae magna aliquet malesuada. Pellentesque
      fringilla eros eu blandit consequat. Nulla nisl ipsum, venenatis sit amet
      risus ut, dictum pellentesque dui. Maecenas velit dolor, volutpat vel
      laoreet in, lacinia quis sem.
    ctas:
      - url: /
        text: CTA text
  - type: paragraph
    ui:
      grid: large
      offset: center
    surtitle: Grid large / Offset center / No theme
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: >-
      Quisque eget magna nec nunc scelerisque posuere nec at eros. Nulla
      placerat ipsum pulvinar mauris lacinia, vel consectetur sem
      ullamcorper. Pellentesque nec nisi nunc. Fusce commodo vehicula tortor,
      sed convallis purus posuere a. Proin ullamcorper, elit in cursus
      facilisis, nulla neque convallis libero, nec aliquet lorem ante non
      eros. Sed convallis enim placerat volutpat molestie. Etiam dictum dictum
      purus, vitae sagittis urna condimentum quis.
      

      Aliquam mattis sapien vitae magna aliquet malesuada. Pellentesque
      fringilla eros eu blandit consequat. Nulla nisl ipsum, venenatis sit amet
      risus ut, dictum pellentesque dui. Maecenas velit dolor, volutpat vel
      laoreet in, lacinia quis sem.
    ctas:
      - url: /
        text: CTA text
  - type: paragraph
    ui:
      grid: medium
      offset: center
    surtitle: Grid medium / Offset center / No theme
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: >-
      Quisque eget magna nec nunc scelerisque posuere nec at eros. Nulla
      placerat ipsum pulvinar mauris lacinia, vel consectetur sem
      ullamcorper. Pellentesque nec nisi nunc. Fusce commodo vehicula tortor,
      sed convallis purus posuere a. Proin ullamcorper, elit in cursus
      facilisis, nulla neque convallis libero, nec aliquet lorem ante non
      eros. Sed convallis enim placerat volutpat molestie. Etiam dictum dictum
      purus, vitae sagittis urna condimentum quis.
      

      Aliquam mattis sapien vitae magna aliquet malesuada. Pellentesque
      fringilla eros eu blandit consequat. Nulla nisl ipsum, venenatis sit amet
      risus ut, dictum pellentesque dui. Maecenas velit dolor, volutpat vel
      laoreet in, lacinia quis sem.
    ctas:
      - url: /
        text: CTA text
  - type: paragraph
    ui:
      grid: small
      offset: center
    surtitle: Grid small / Offset center / No theme
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: >-
      Quisque eget magna nec nunc scelerisque posuere nec at eros. Nulla
      placerat ipsum pulvinar mauris lacinia, vel consectetur sem
      ullamcorper. Pellentesque nec nisi nunc. Fusce commodo vehicula tortor,
      sed convallis purus posuere a. Proin ullamcorper, elit in cursus
      facilisis, nulla neque convallis libero, nec aliquet lorem ante non
      eros. Sed convallis enim placerat volutpat molestie. Etiam dictum dictum
      purus, vitae sagittis urna condimentum quis.
      

      Aliquam mattis sapien vitae magna aliquet malesuada. Pellentesque
      fringilla eros eu blandit consequat. Nulla nisl ipsum, venenatis sit amet
      risus ut, dictum pellentesque dui. Maecenas velit dolor, volutpat vel
      laoreet in, lacinia quis sem.
    ctas:
      - url: /
        text: CTA text

  # CENTER
  - type: paragraph
    ui:
      grid: medium
      offset: center
      align: center
      theme: accent
    surtitle: Grid medium / Offset center / Theme accent / Align center
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: >-
      Quisque eget magna nec nunc scelerisque posuere nec at eros. Nulla
      placerat ipsum pulvinar mauris lacinia, vel consectetur sem
      ullamcorper. Pellentesque nec nisi nunc. Fusce commodo vehicula tortor,
      sed convallis purus posuere a. Proin ullamcorper, elit in cursus
      facilisis, nulla neque convallis libero, nec aliquet lorem ante non
      eros. Sed convallis enim placerat volutpat molestie. Etiam dictum dictum
      purus, vitae sagittis urna condimentum quis.
    ctas:
      - url: /
        text: CTA text

  # THEME
  - type: paragraph
    ui:
      grid: large
      offset: center
      theme: light
    surtitle: Grid large / Offset center / Theme light
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: >-
      Quisque eget magna nec nunc scelerisque posuere nec at eros. Nulla
      placerat ipsum pulvinar mauris lacinia, vel consectetur sem
      ullamcorper. Pellentesque nec nisi nunc. Fusce commodo vehicula tortor,
      sed convallis purus posuere a. Proin ullamcorper, elit in cursus
      facilisis, nulla neque convallis libero, nec aliquet lorem ante non
      eros. Sed convallis enim placerat volutpat molestie. Etiam dictum dictum
      purus, vitae sagittis urna condimentum quis.
      

      Aliquam mattis sapien vitae magna aliquet malesuada. Pellentesque
      fringilla eros eu blandit consequat. Nulla nisl ipsum, venenatis sit amet
      risus ut, dictum pellentesque dui. Maecenas velit dolor, volutpat vel
      laoreet in, lacinia quis sem.
    ctas:
      - url: /
        text: CTA text
      - url: /
        text: CTA text
  - type: paragraph
    ui:
      grid: large
      offset: center
      theme: light
    surtitle: Grid large / Offset center / Theme light / Without text
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    ctas:
      - url: /
        text: CTA text
  - type: paragraph
    ui:
      grid: large
      offset: center
      theme: highlight
    surtitle: Grid large / Offset center / Theme highlight
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: >-
      Quisque eget magna nec nunc scelerisque posuere nec at eros. Nulla
      placerat ipsum pulvinar mauris lacinia, vel consectetur sem
      ullamcorper. Pellentesque nec nisi nunc. Fusce commodo vehicula tortor,
      sed convallis purus posuere a. Proin ullamcorper, elit in cursus
      facilisis, nulla neque convallis libero, nec aliquet lorem ante non
      eros. Sed convallis enim placerat volutpat molestie. Etiam dictum dictum
      purus, vitae sagittis urna condimentum quis.
      

      Aliquam mattis sapien vitae magna aliquet malesuada. Pellentesque
      fringilla eros eu blandit consequat. Nulla nisl ipsum, venenatis sit amet
      risus ut, dictum pellentesque dui. Maecenas velit dolor, volutpat vel
      laoreet in, lacinia quis sem.
    ctas:
      - url: /
        text: CTA text
      - url: /
        text: CTA text
  - type: paragraph
    ui:
      grid: large
      offset: center
      theme: highlight
    surtitle: Grid large / Offset center / Theme highlight / Without text
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    ctas:
      - url: /
        text: CTA text
  - type: paragraph
    ui:
      grid: large
      offset: center
      theme: accent
    surtitle: Grid large / Offset center / Theme accent
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: >-
      Quisque eget magna nec nunc scelerisque posuere nec at eros. Nulla
      placerat ipsum pulvinar mauris lacinia, vel consectetur sem
      ullamcorper. Pellentesque nec nisi nunc. Fusce commodo vehicula tortor,
      sed convallis purus posuere a. Proin ullamcorper, elit in cursus
      facilisis, nulla neque convallis libero, nec aliquet lorem ante non
      eros. Sed convallis enim placerat volutpat molestie. Etiam dictum dictum
      purus, vitae sagittis urna condimentum quis.
      

      Aliquam mattis sapien vitae magna aliquet malesuada. Pellentesque
      fringilla eros eu blandit consequat. Nulla nisl ipsum, venenatis sit amet
      risus ut, dictum pellentesque dui. Maecenas velit dolor, volutpat vel
      laoreet in, lacinia quis sem.
    ctas:
      - url: /
        text: CTA text
  - type: paragraph
    ui:
      grid: large
      offset: center
      theme: accent
    surtitle: Grid large / Offset center / Theme accent / Without text
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    ctas:
      - url: /
        text: CTA text
      - url: /
        text: CTA text

  - type: paragraph
    ui:
      grid: large
      offset: center
      theme: light
    surtitle: Grid large / Offset center / Theme light / With notes
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    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:
      - 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
    ui:
      grid: large
      offset: center
      theme: dark
    surtitle: Grid large / Offset center / Theme dark
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: >-
      Quisque eget magna nec nunc scelerisque posuere nec at eros. Nulla
      placerat ipsum pulvinar mauris lacinia, vel consectetur sem
      ullamcorper. Pellentesque nec nisi nunc. Fusce commodo vehicula tortor,
      sed convallis purus posuere a. Proin ullamcorper, elit in cursus
      facilisis, nulla neque convallis libero, nec aliquet lorem ante non
      eros. Sed convallis enim placerat volutpat molestie. Etiam dictum dictum
      purus, vitae sagittis urna condimentum quis.
      

      Aliquam mattis sapien vitae magna aliquet malesuada. Pellentesque
      fringilla eros eu blandit consequat. Nulla nisl ipsum, venenatis sit amet
      risus ut, dictum pellentesque dui. Maecenas velit dolor, volutpat vel
      laoreet in, lacinia quis sem.
    ctas:
      - url: /
        text: CTA text
      - url: /
        text: CTA text

  - type: paragraph
    ui:
      grid: large
      offset: center
      theme: neutral
    surtitle: Grid large / Offset center / Theme neutral
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: >-
      Quisque eget magna nec nunc scelerisque posuere nec at eros. Nulla
      placerat ipsum pulvinar mauris lacinia, vel consectetur sem
      ullamcorper. Pellentesque nec nisi nunc. Fusce commodo vehicula tortor,
      sed convallis purus posuere a. Proin ullamcorper, elit in cursus
      facilisis, nulla neque convallis libero, nec aliquet lorem ante non
      eros. Sed convallis enim placerat volutpat molestie. Etiam dictum dictum
      purus, vitae sagittis urna condimentum quis.
      

      Aliquam mattis sapien vitae magna aliquet malesuada. Pellentesque
      fringilla eros eu blandit consequat. Nulla nisl ipsum, venenatis sit amet
      risus ut, dictum pellentesque dui. Maecenas velit dolor, volutpat vel
      laoreet in, lacinia quis sem.
    ctas:
      - url: /
        text: CTA text
      - url: /
        text: CTA text

  - type: paragraph
    ui:
      grid: large
      offset: center
      theme: black
    surtitle: Grid large / Offset center / Theme black
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: >-
      Quisque eget magna nec nunc scelerisque posuere nec at eros. Nulla
      placerat ipsum pulvinar mauris lacinia, vel consectetur sem
      ullamcorper. Pellentesque nec nisi nunc. Fusce commodo vehicula tortor,
      sed convallis purus posuere a. Proin ullamcorper, elit in cursus
      facilisis, nulla neque convallis libero, nec aliquet lorem ante non
      eros. Sed convallis enim placerat volutpat molestie. Etiam dictum dictum
      purus, vitae sagittis urna condimentum quis.
      

      Aliquam mattis sapien vitae magna aliquet malesuada. Pellentesque
      fringilla eros eu blandit consequat. Nulla nisl ipsum, venenatis sit amet
      risus ut, dictum pellentesque dui. Maecenas velit dolor, volutpat vel
      laoreet in, lacinia quis sem.
    ctas:
      - url: /
        text: CTA text
      - url: /
        text: CTA text

  - type: paragraph
    ui:
      grid: large
      offset: center
      theme: white
    surtitle: Grid large / Offset center / Theme white
    title: Quisque eget magna nec nunc scelerisque posuere nec at eros.
    text: >-
      Quisque eget magna nec nunc scelerisque posuere nec at eros. Nulla
      placerat ipsum pulvinar mauris lacinia, vel consectetur sem
      ullamcorper. Pellentesque nec nisi nunc. Fusce commodo vehicula tortor,
      sed convallis purus posuere a. Proin ullamcorper, elit in cursus
      facilisis, nulla neque convallis libero, nec aliquet lorem ante non
      eros. Sed convallis enim placerat volutpat molestie. Etiam dictum dictum
      purus, vitae sagittis urna condimentum quis.
      

      Aliquam mattis sapien vitae magna aliquet malesuada. Pellentesque
      fringilla eros eu blandit consequat. Nulla nisl ipsum, venenatis sit amet
      risus ut, dictum pellentesque dui. Maecenas velit dolor, volutpat vel
      laoreet in, lacinia quis sem.
    ctas:
      - url: /
        text: CTA text
      - url: /
        text: CTA text
---