+ 
++ This is a longer flash message in it's own paragraph. It ends up looking something like this. If we keep adding more + text, it'll eventually wrap to a new line. +
+And this is another paragraph.
+
+```
+
+### Small avatars
+
+We occasionally use smaller avatars. Anything less than `48px` wide should include the `.avatar-small` modifier class to reset the `border-radius` to a more appropriate level.
+
+```html live
+
+```
+
+### Parent-child avatars
+
+When you need a larger parent avatar, and a smaller child one, overlaid slightly, use the parent-child classes.
+
+```html live
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ <%= octicon "zap", :class => "CircleBadge-icon text-white" %>
+
+```
+
+### Medium
+
+```html live
+
+
+
+
+ Use it to provide information when no dynamic content exists.
+Use it to provide information when no dynamic content exists.
+Use it to provide information when no dynamic content exists.
+Use it to provide information when no dynamic content exists.
+Use it to provide information when no dynamic content exists.
+Use it to provide information when no dynamic content exists.
+Use it to provide information when no dynamic content exists.
+A very long paragraph that wraps onto multiple lines without overlapping or wrapping underneath the icon to it's left
+