Strongsuit logo
HTML HeadingsHeading ClassesBUttonsBUtton TextLabelBadgeCardsCard SizesNavSubnavListIcon SizesOther HTML ElementsText classesText AlignmentsText ColorSBackgroundsRich TextFormHidden Classes

Licensing

All graphical assets in this template are licensed for personal and commercial use. If you'd like to use a specific asset, please check the license below

Images

All images in this template are coming from Unsplash and Pexels. You are free to use them for personal & commercial use.

Unsplash

Unsplash Image CollectionLicense

Pexels

Pexels Image CollectionLicense

Freepik

Freepik Image CollectionLicense

Ls.graphics

License
License ImageLicense ImageLicense ImageLicense ImageLicense ImageLicense ImageLicense ImageLicense ImageLicense ImageLicense ImageLicense ImageLicense Image

Fonts

The fonts in this template are from Fontshare. You are free to use this font for personal & commercial use.

Manrope

Source & License

Icons

The icons in this template are from Remix Icons. You are free to use this font for personal & commercial use.

Remix Icons

Source

Style Guide

HTML Headings

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6

Heading Classes

Heading XLarge
Heading Large
Heading Medium
Heading Small
Heading H1
Heading H2
Heading H3
Heading H4
Heading H5
Heading H6

Button Text

Label

Default
Link
Label
Neutral 1
Link
Label
Primary
Link
Label
Blue
Link
Label
Green
Link
Link
Label
Orange Bold
Link
Label
Orange Subtle
Link
Label

Badge

Default
Link
Muted
Link
Primary
Link
Blue
Link
Green
Link
Yellow
Link
Red
Link

Cards

Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Muted
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Green
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Blue
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Green
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Orange
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Neutral 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.

Card Sizes

Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at volutpat.
Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectu.
XLarge
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labor.

List

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.

Icon Sizes

Other HTML Elements

All Paragraphs
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All Links
“Quote - Sample text is being used as a placeholder for real text that is normally present.”

Text Classes

Text Xlarge

Text Large

Text Medium

Text Regular

Text Small

Text Tiny

Text Italic

Text Meta Small

Text Meta

Text Meta Large

Text Link

Text Alignments

text-align-left
text-align-center
text-align-right

Text Colors

Text Color Default
Text Color Muted

Backgrounds



‍


‍


‍


‍


‍


‍

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

  • The rich text element allows you to create and format headings,
  • The rich text element allows you to create and format headings,
  • The rich text element allows you to create and format headings,

This is a link

“Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.”
Placeholder
This is a placeholder image.

Form

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

Hidden Classes

Check the Navigator to see the hidden section below. This section contains utility classes like padding, margin and container.