Components

Icons

  1. Place SVG icons in your projects as a code, not as a file, if possible (for monochrome icons).

  2. Find and replace the fill="#color" in your SVG code to fill="currentColor" for monochrome icons.

  3. Set width="100%" and remove height="auto" so that an icon fills all the space.

  4. Set the unique "url(#clip0)" to avoid glitches between icons.

  5. Optimize the code with SVG-Optimiser if it's not damage the icon.

  6. Place final code in Embed Code component.

  7. Give to this component style "SVG" and display it as a non-shrinking flex box.

  8. Copy and paste your prepared icons from this page to any place on your website inside DIVs that will controls their size.

Monochrome Icons

Colored Icons

Logos

Buttons

  1. For texts inside buttons use styles that you prepared on Typography page. Don't change size or line height of these text in button style.

  2. For buttons with icons add subclasses to the SVG embed elements (your SVG icons) at the both side of the button. Don't add any additional margins to the text itself.

Forms

  1. Use custom code to control iOS behaviors.

  2. Use Custom Submit button + custom code instead of the Native Submit button to get more freedom of customizing.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Backgrounds

  1. Create empty divs with background colours.

  2. Change font color of dark divs to white, if needed.

  3. Add them as a Global Combo Class to apply colour for specific section.

Images

  1. Place all images in divs. All styling must be set to this div, not to the image inside.

  2. For images create only 2 classes: for Contain images and for Cover ones.

  3. Use an Embed code with CSS style for Image Box that has to have flexible width and fixed proportions, like 16:9 or 1:1.

  4. Add subclass with absolute positioning for the image in that Image Box.

Contain

Cover

Absolute with 16:9 and 100% width