Welcome to the style guide for your website. You can use this page to quickly make changes to things such as fonts, text sizes, colours, buttons, and more. These changes will then be applied across your website.
To ensure your site is responsive and adapts to all devices, some elements will have different stylings across different breakpoints. For example, heading sizes on desktop breakpoints are slightly different to those on mobile breakpoints.
After we launch your website your style guide won't be viewable to the public, and can only be accessed with a password.
If you have any questions about this style guide or your website in general, then please do not hesitate to email me - rutger@nimbble.nl
Welcome to the style guide for your website. You can use this page to quickly make changes to things such as fonts, text sizes, colours, buttons, and more. These changes will then be applied across your website.
To ensure your site is responsive and adapts to all devices, some elements will have different stylings across different breakpoints. For example, heading sizes on desktop breakpoints are slightly different to those on mobile breakpoints.
After we launch your website your style guide won't be viewable to the public, and can only be accessed with a password.
If you have any questions about this style guide or your website in general, then please do not hesitate to email me - rutger@nimbble.nl
The primary colour for all typography on your website is #282829
As mentioned in the introduction, the sizing of your headings differ between desktop and mobile breakpoints. Both desktop and mobile breakpoints have a base font size of 18px (1em). All pixel values have been rounded.
Desktop - Major Third Scale (1.25) 44px | 35px | 28px | 23px | 18px | 14px | 12px
Mobile - Minor Third Scale (1.20) 37px | 31px | 26px | 22px | 18px | 15px | 12px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Desktop & Mobile: Mulish | 18px / 1em | 150% | Normal
The .p1 class can have a number of combo-classes applied to it, such as - .small (reduces font size to 14px / 0.78em). .tiny (reduces font size to 12px / 0.67em). .centred (centre aligns the text). .capitals (makes the the text all CAPS). .no-max-width (disables the 65ch max-width setting). .desktop-only (texts only displays on desktop breakpoints). .mobile-only (text only displays on tablet & mobile breakpoints).
Text
This is a piece of text. Not quite the same as a paragraph element.
Desktop & Mobile: Mulish | 18px / 1em | 150% | Normal
The .text class can also have the same combo-classes applied to it as the .p1 class.
Rich text blocks (RTBs) are different from regular paragraph and text elements. RTBs allow you to format headings, paragraphs, quotes, images, videos, captions, and lists all within the one element.
RTBs are what will be used for the primary body of your blog posts.
Standard Rich text
Rich Text: Default
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et leo nisl. Proin elementum at odio ut finibus. Maecenas elementum lobortis neque, eget euismod augue auctor vitae. In sagittis mauris ut consequat luctus. Sed aliquet tempus finibus. Suspendisse tempus velit leo, ac auctor neque interdum vel. Fusce et ligula aliquet, malesuada erat sed, tempus est. Cras non est sit amet tortor vehicula ullamcorper. Quisque maximus sem sit amet magna lacinia efficitur.
Aliquam elit justo, fermentum
Integer non luctus sem, ut hendrerit ante. Cras ut lorem sagittis eros consequat posuere nec aliquam magna. In porttitor elit vitae eleifend accumsan. Sed eleifend diam vel turpis ornare, at ornare nisl consequat. Morbi dignissim aliquet ante, sed condimentum est interdum non. Nullam fringilla nisi eu nulla semper ultricies. Morbi pharetra luctus urna.
Integer non luctus sem, ut hendrerit ante. Cras ut lorem sagittis eros consequat posuere nec aliquam magna. In porttitor elit vitae eleifend accumsan. Sed eleifend diam vel turpis ornare, at ornare nisl consequat. Morbi dignissim aliquet ante, sed condimentum est interdum non. Nullam fringilla nisi eu nulla semper ultricies. Morbi pharetra luctus urna.
In porttitor elit vitaeiful
Integer non luctus sem, ut hendrerit ante. Cras ut lorem sagittis eros consequat posuere nec aliquam magna. In porttitor elit vitae eleifend accumsan. Sed eleifend diam vel turpis ornare, at ornare nisl consequat. Morbi dignissim aliquet ante, sed condimentum est interdum non. Nullam fringilla nisi eu nulla semper ultricies. Morbi pharetra luctus urna.
Aliquam elit justo, fermentum ut mauris non, eleifend dictum urna. Cras nibh elit, congue quis luctus pulvinar, feugiat sit amet libero. In in odio eu ante tempus hendrerit.
Integer quis nunc sit amet dui pulvinar sagittis. Integer tincidunt auctor purus vitae tincidunt. Ut id quam erat. Pellentesque tempor velit quam, a finibus dolor faucibus vel. Integer elit erat, mollis at odio vitae, dictum rhoncus odio. Proin euismod ex quis tellus convallis, sit amet eleifend lorem sagittis.
Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis.
TEMPLATE FEATURES:
Integer elit erat,
Fupulvinar
Proin euismod
Pellentesque tempor velit
In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium.
Blog Post
Rich Text: Post
A
dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna.
Pellentesque habitant
Fusce convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat.
You could do this with a headline or slogan (such as VW’s “Drivers Wanted” campaign), color or layout (Target’s new colorful, simple ads are a testimony to this) or illustration (such as the Red Bull characters or Zoloft’s depressed ball and his ladybug friend). All good advertising copy is comprised of the same basic elements.
Surabitur vestibulum
Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.
Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc.
.jpg)
