ModalHeader

 1// Example without a path to the image, with initials
 2
 3@molecules.ModalHeader("horizontal") {
 4  @molecules.ModalHeaderClose("Close")
 5  @molecules.ModalHeaderHero(false) {
 6    @protons.IconHero(
 7      &protons.IconHeroBosons{
 8        Size: "lg",
 9      },
10    ) {
11      @icons.IconTimes()
12    }
13  }
14  @molecules.ModalHeaderContent("Deactivate account", "left") {
15    Are you sure you want to deactivate your account? All of your data will be ...
16  }
17}

 1// Example centered without closing
 2
 3@molecules.ModalHeader(""vertical"") {
 4  @molecules.ModalHeaderClose("Close")
 5  @molecules.ModalHeaderHero(true) {
 6    @protons.IconHero(
 7      &protons.IconHeroBosons{
 8        Size: "lg",
 9      },
10    ) {
11      @icons.IconTimes()
12    }
13  }
14  @molecules.ModalHeaderContent("Deactivate account", "center") {
15    Are you sure you want to deactivate your account? All of your data will be ...
16  }
17}

1// Example without IconHero
2
3@molecules.ModalHeader("horizontal") {
4  @molecules.ModalHeaderClose("Close")
5  @molecules.ModalHeaderContent("Deactivate account", "left") {
6    Are you sure you want to deactivate your account? All of your data will be ...
7  }
8}

1// Example with additional content on top
2
3@molecules.ModalHeader("vertival") {
4  <div class="block h-20 w-full rounded-md bg-primary-400"></div>
5  @molecules.ModalHeaderContent("Deactivate account", "center") {
6    Are you sure you want to deactivate your account? All of your data will be ...
7  }
8}