Images

Below you'll find list of images with different aspect ratio, which you can use in your projects. Note that images occupies full width of the container. Class Image defines default image without any spacings. Also you you can use Side Image, BG Image and Column Image classes to extend functionality.

Learn more about image classes on modifiers page.

Image

1:1

3:4

16:9

Icons

Sprkl supports svg icons through the code embed feature. Add Embeded component and insert your svg code inside of Embeded component. You can get SVG code from any icon with help of SVG Export for figma.  Use Asset class + asset size to declare an icon seize, e.g. Asset Size L

Logotypes

Depending on your needs and place of use you can create and use different variations of logotypes. Sprkl uses 4 different variations, such as Default and Dark which looks good on white backgrouds, Pale and Light which looks good on dark backgrounds.

In order to use proper logotype variation use Logotype class + add variation class name (Pale, dark, light). For example Logotype Pale

You might want to showcase your partners or clients on your website, for this case we've prepared Client Logotype class, which should be placed inside of Client Logotype Container.

Client logotype