---
isPage: true
draft: false
title: Alert
description: Add alert section with state
icon: exclamation-octagon
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-site/refs/heads/main/content/docs/alert.md
      blank: true
blocks:
  - type: alert
    state: light
    background: true
    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
    state: light
    background: false
    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
    state: warning
    background: false
    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
    state: danger
    background: false
    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
    state: success
    background: false
    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
    state: info
    background: false
    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
    state: primary
    background: false
    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
    state: secondary
    background: false
    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
    state: dark
    background: false
    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.
---