Edit online

Hazard

Hazards (embodied by the <hazardstatement> element) contain warning information. They are based on ANSI Z535 and ISO 3864 standards and may have various values set for the type (note, tip, fastpath, restriction, important, remember, attention, caution, notice, danger, warning, other).

Edit online

How to Customize Other Type Hazards

It is possible to create custom hazard types by using the @type and @othertype attributes. For example, to add a high voltage hazard in a microwave manual:

<hazardstatement id="hazardstatement_vzy_zdc_syb" type="other" othertype="HIGH_VOLTAGE">
    <messagepanel id="messagepanel_wzy_zdc_syb">
        <typeofhazard>Electrical Shock</typeofhazard>
        <howtoavoid>Do not disassemble or repair the microwave yourself.</howtoavoid>
    </messagepanel>
    <hazardsymbol id="hazardsymbol_z4t_gjc_syb" href="electricity_icon.svg"/>
</hazardstatement>

Tip:

SVG images are preferred for the <hazardsymbol> and you should set both @height="1em" and @width="1em" to obtain a rendering that is similar to default hazards.

To customize the hazard, add the following rules to your customization CSS:

/* Change the header color. */
*[othertype ~= "HIGH_VOLTAGE"] .hazardstatement--other {
  content: "HIGH VOLTAGE"; /* Change the hazard text */
  background-color: #d84b20;
  color: unset;
}

/* Show logo in the header. */
*[othertype ~= "HIGH_VOLTAGE"] .hazardstatement--other::before {
  padding: .5rem;
  content: url("electricity_icon.svg");
}

/* Show logo in the left cell. */
*[othertype ~= "HIGH_VOLTAGE"] th {
  table-column-span: 2 !important;
}
*[othertype ~= "HIGH_VOLTAGE"] .hazardstatement--logo-col {
  display: table-column !important;
}
*[othertype ~= "HIGH_VOLTAGE"] td:first-of-type {
  display: table-cell !important;
}
*[othertype ~= "HIGH_VOLTAGE"] .hazardsymbol {
  height: 4em; /* Change the symbol dimension */
}

The result in the PDF output would look like this:

Edit online

How to Remove the Hazard Symbol

It is possible to remove the column that contains the hazard symbol (for example, if you want to maximize the message panel).

To remove the caution symbols for example, add the following rules to your customization CSS:

.hazardstatement_caution .hazardstatement--logo-col {
  display: none;
}
.hazardstatement_caution th {
  table-column-span: 1
}
.hazardstatement_caution td:first-of-type {
  display: none;
}