---
isPage: true
draft: false
title: Alert
description: Add alert section with state
icon: octagon-alert
hero:
  surtitle: Blocks
  title: Block alert
  text: Add alert section with state.
  ctas:
    - text: Documentation
      url: https://www.hugolify.io/docs/blocks/alert/
      blank: true
    - text: Page code on Github
      url: https://raw.githubusercontent.com/Hugolify/hugolify-example-blocks/refs/heads/main/content/docs/alert.md
      blank: true
      link: true
  ui:
    align: center
    theme: light
blocks:
  - type: alert
    ui:
      grid: container
    heading:
      surtitle: Grid container / State light
    state: light
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.
  - type: alert
    ui:
      grid: container
    heading:
      surtitle: Grid container / State light / With title
    state: light
    title: Nullam in felis eget enim tincidunt vehicula.
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.
  - type: alert
    ui:
      grid: container
    heading:
      surtitle: Grid container / State info / With icon
    state: info
    icon: info
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.
  - type: alert
    ui:
      grid: container
    heading:
      surtitle: Grid container / State warning / With title and icon
    state: warning
    title: Nullam in felis eget enim tincidunt vehicula.
    icon: triangle-alert
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.
  - type: alert
    ui:
      grid: container
    heading:
      surtitle: Grid container / State danger / With title and icon
    state: danger
    title: Nullam in felis eget enim tincidunt vehicula.
    icon: octagon-alert
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.
  - type: alert
    ui:
      grid: container
    heading:
      surtitle: Grid container / State success / With title and icon
    state: success
    title: Nullam in felis eget enim tincidunt vehicula.
    icon: circle-check
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.
  - type: alert
    ui:
      grid: small
      offset: center
      align: center
    heading:
      surtitle: State light / Grid small / Offset center / Align center
    state: light
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.
  - type: alert
    ui:
      grid: medium
      offset: center
      align: center
    heading:
      surtitle: State warning / Grid medium / Offset center / Align center
    state: warning
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.
  - type: alert
    ui:
      grid: large
      offset: center
      align: end
    heading:
      surtitle: State danger / Grid large / Offset center / Align end
    state: danger
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.
  - type: alert
    ui:
      grid: container
    heading:
      surtitle: Grid container / State success
    state: success
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.
  - type: alert
    ui:
      grid: container
      theme: accent
    heading:
      surtitle: Grid container / State info / Theme accent
    state: info
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.
  - type: alert
    ui:
      grid: container
    heading:
      surtitle: Grid container / State primary
    state: primary
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.
  - type: alert
    ui:
      grid: container
      theme: dark
    heading:
      surtitle: Grid container / State secondary / Theme dark
    state: secondary
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.
  - type: alert
    ui:
      grid: container
    heading:
      surtitle: Grid container / State dark
    state: dark
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.

  - type: alert
    ui:
      grid: container
      theme: light
    heading:
      surtitle: Grid container / State info / Theme light
    state: info
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.

  - type: alert
    ui:
      grid: container
      theme: highlight
    heading:
      surtitle: Grid container / State info / Theme highlight
    state: info
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.

  - type: alert
    ui:
      grid: container
      theme: neutral
    heading:
      surtitle: Grid container / State info / Theme neutral
    state: info
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.

  - type: alert
    ui:
      grid: container
      theme: black
    heading:
      surtitle: Grid container / State info / Theme black
    state: info
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.

  - type: alert
    ui:
      grid: container
      theme: white
    heading:
      surtitle: Grid container / State info / Theme white
    state: info
    text:
      Duis nisl odio, blandit vel quam eget, **blandit dapibus erat**. Nullam
      pretium eleifend lectus, at semper nulla egestas a. Praesent condimentum
      nibh erat, eget interdum nisi auctor eget.
---