Effective attention grabbers
Alerts in Acorn are useful for drawing attention, and they go great together with buttons.
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>
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>
Always specify your HEX colours in 6 digits. That means
#RRGGBB instead of
#RGB. Some email clients won't like it if you use, for example,
#FC0 instead of