Simple Annotations

The simplest kind of annotation definition consists of just a name and some CSS defining how the annotation is to be rendered by CUE:

<annotation name="shock">
  <ui:style>{ color: red; }</ui:style>
</annotation>

If you added the above annotation to your paragraph story element type, then when editing paragraph elements in CUE, you would see that the formatting bar now included a new style button. Since your annotation definition doesn't include an icon, the button would be formed from the first two characters of the annotation name: sh in this case. You can, however, include a CSS icon definition as follows:

<annotation name="shock">
  <ui:style>{ color: red; }</ui:style>
  <ui:icon>
    {
      -moz-osx-font-smoothing: grayscale; 
      -webkit-font-smoothing: antialiased; 
      font-family: "Storylines"; 
      font-size: 90%; 
      content: "\E889"; 
    }
  </ui:icon>
</annotation>