Pseudo Image Styling

Image Styling

Adding images to your notes, can liven them up. You can now add pseudo-classnames to your images as alt-text, to create different kinds of image styles.

Pseudo Class Names

The new alt text for images to style them:

• float-right: it floats right of the text, text wraps around image
  
• float-left: it floats left of the text, text wraps around image
  
• float-center: image is centered, text does not wrap around image
  
• float-clear: it clears floating, so it doesn't affect this and the images after it
• type-banner: gives the image a banner style
  
• type-profile: makes the image profile/avatar sized
  
• type-portait: image is displayed as portrait
  
• radius-small: gives the image small rounded corners
  
• radius-medium: gives the image medium rounded corners
  
• radius-large: gives the image large rounded corners
  
• radius-circle: makes the image have 50% rounded corners, for sqaure images it will be a circle, for rectangle images it will be oval
  
• border-small: gives it a small yellow border
  
• border-medium: gives it a medium yellow border
  
• border-large: gives it a large yellow border
  

You can mix the alt texts to create your own style, for example
![float-left type-profile radius-circle border-medium](path/to/image.png)

The following image was used for these examples: