Images

Images in Knockout are sized according to the aspect ratio of their parent div, which can be adjusted across viewports. Image elements use the Object Fit Cover class, while their parents use the Image class & a subclass that defines the aspect ratio like 16x5.

Tip: To view tablet classes & mobile classes, you must switch to their respective viewports.

Image
16x5
Image placeholder.
Image
21x9
Image placeholder.
Image
2x1
Image placeholder.
Image
16x9
Image placeholder.
Image
4x3
Image placeholder.
Image
1x1
Image placeholder.
Image
1x2
Image placeholder.
Tablet viewport icon.
More classes available at tablet viewport
Image
16x5 Tab
Image placeholder.
Image
21x9 Tab
Image placeholder.
Image
2x1 Tab
Image placeholder.
Image
16x9 Tab
Image placeholder.
Image
3x4 Tab
Image placeholder.
Image
1x1 Tab
Image placeholder.
Image
1x2 Tab
Image placeholder.
Mobile viewport icon.
More classes available at mobile viewport
Image
16x5 Mob
Image placeholder.
Image
21x9 Mob
Image placeholder.
Image
2x1 Mob
Image placeholder.
Image
16x9 Mob
Image placeholder.
Image
4x3 Mob
Image placeholder.
Image
1x1 Mob
Image placeholder.
Image
1x2 Mob
Image placeholder.

Icons - Font awesome

In order to use Font Awesome make sure to include the "Font Awesome" symbol on the page.

Knockout uses the Font Awesome 5 Free icon system, implemented as a font. This means that any unicode glyph from the free font can be pasted as text, provided it's given a class corresponding to its set. Solid and Brands sets are supported. These classes can be combined with other classes for additional styling.

Icons can also be added as pseudo-elements in custom code using unicode or the unicode glyph.

The icon cheat sheet can be found here. To update Font Awesome to the latest or to upgrade to Font Awesome Pro, visit FontAwesome.com.

Icon Solid
Icon Brands

Icon Solid
Text - Primary

CTA
Read more
 Created by Edgar Allan. 
Made in Atlanta. ©20xx

This work is licensed under CC BY-SA 4.0