Effective attention grabbers

Alerts in Acorn are useful for drawing attention, and they go great together with buttons.

Filled

A simple Row table with background colour and some padding on the cell inside. Since we're not using the Grid, we don't even need to add a col class on the cell.

To align text inside, simply use the align="" attribute on the cell that has the background colour defined.

<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
  <tr>
    <td bgcolor="#0099E5" style="color: #FFFFFF; padding: 16px 32px;">
      This is an alert with background colour
    </td>
  </tr>
</table>

Outlined

We've also included an outlined alert, that has a 2px border added on the Row table. There's no background colour set (it's inherited from the Container), but you can add one for further customisation.

<table cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border: 2px solid #0099E5;">
  <tr>
    <td style="color: #0099E5; padding: 16px 32px;">
      This is an alert with an outline border
    </td>
  </tr>
</table>