Restauranti Style Guide
Welcome to the style guide for Restauranti! On this page you'll find a visual list of all of the main styling classes that can be used across the website, from colors to font styles to box shadows.
Not all of the classes you find here will be used in the pre-created layouts on the templates pages, but they're set up and available to you should you want to try your hand at creating some new content, or make some adjustments to what's already there.
You can use these classes on their own, or in combination to add styling to containers, change the color of text and set spacing amounts between content.
Colors
Color Palette
Restauranti uses a three color system; Lightest, Accent and Darkest. There are also shades of these colors available to make up any gaps in the palette you might need! You can see the colors set on the swatches below.
Set Background Color
You can set the background color of a Div using the class name Background 'Color Name', for example: Background Accent will change the background color to the color set as Accent.
Set Text Color
You can set the text color of any text content using the class name Text Color 'Color Name', for example: Text Color Dark will change the text color to the color set as Dark.
Typography
Headings
Remember to follow correct heading hierarchy when placing them onto pages:
- Only have one H1 tag on each page (use the cog icon on the heading element to change this)
- From them on keep heading tags in descending order within nested content. Use classes to adjust styling away from the default heading style when necessary, simply use the name of the desired heading as the class, such as Heading Four. This will make a heading look like a 'heading four' even if it is tagged as a H1, preserving structure and hierarchy while allowing for more flexible design.
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Body Text (Paragraphs)
Use these classes to adjust the sizing and design of the main body text of the site.
Text Size Large
Text Size Medium
Text Size Small
Text Style Italic
Text Style Bold
Text Style Uppercase
Text Style Underline
Lists
- This is an unordered list
- This is an unordered list
- This is an unordered list
- This is an ordered list
- This is an ordered list
- This is an ordered list
Quote Blocks
"This is the text inside a quote block"
Rich Text Content
Below is the styling for all the content inside a Rich Text block, this is used to format a lot of text content in one place easily. Simply add the class Rich Text Block to a Rich Text element in order to apply these styles.
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
.webp)
- Unordered List
- Unordered List
- Unordered List
- Ordered List
- Ordered List
- Ordered List
"This is a quote in a rich text container"
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
This is some italic content
This is some bold content
This is some superscript content
This is some subscript content
This is a linked piece of text
Text Alignment
Use these classes on a Div wrapping text content to change the alignment of all the text within that container.
Buttons & Links
Buttons
Buttons come in two styles, Primary, and Secondary. These styles also come with a Light and Dark variant to match any background or design you might need.
Buttons are created as components, so to create one, simply drag it from the components sidebar. Then you can adjust the text and link on a per button basis in the buttons settings.
Linked Text
Use these classes to style regular, inline text links. Simply apply any of the below 'Link Style' classes to apply the style. For example, Link Style One.
If you wish to change the text color of the link, you can also use a regular text color class as a combo class. Such as Text Color Lightest.
Container Styles
Borders
Use these classes to add borders to containers, the class name contains, 'Border' followed by the color from the color palette, eg. 'Accent 300'. A full border class might look something like: Border Dark 300.
Divider Lines
Use these classes to create a divider line between content, simply add a Div and give it a class of Divider Line, then a combo class of a background color to make it a color of your choice. A full class might look like Divider Line Background Accent. By default the background color is set to Darkest.
Corners
Use these classes to add rounded corners to a container. The class should be the word 'Corners' followed by the strength value, eg. None. A full class might look like: Corners S
Box Shadows
Use these classes to add box shadows to a container. The class contains the word 'Shadow' followed by a strength value, eg. S. A full class might look like Shadow M.
Backdrop Filters
Use these classes to add backdrop filters to a container. The class contains the word 'Backdrop' followed by the filter name, eg. Blur. A full class might then look like Backdrop Blur.
Images
Background Images
If you wish to give an element a background image, you must first apply the class Image BG to the desired element. You may then place a Div with a class of Background Image inside this element. Then nest an image element inside the Background Image with a class of Image. This is where you would upload your image of choice.
If you wish to add an overlay to this image, simply set a Div with a class of Image Overlay, next to the Image element followed by a combo class stating which style of overlay you wish to use. For example, Image Overlay Darkest 300
For a parallax effect, add the combo class Parallax to the Image element.
Forms
Form Elements
Use the classes below to apply the styles to the following form elements. Remember to add the classes Form Success and Form Error, to their respective fields to style them.
Spacing
Global Padding
After placing a section the first element inside should be a Div with the Global Padding class, this dictates the max width of the site, as well as the site margins from the edge of the page. By default, this is set to a max width of 1440px and margins of 6 REM. This can also be adjusted at different breakpoints, with tablet set to 4 REM, and mobile landscape and below set to 2 REM.
Padding Blocks
To add spacing inside of a block (padding), use a Div with a 'Padding' class. This consists of the word 'Padding' followed by a sizing. For example, 'S'. An example of a full padding block class might be Padding XL.
To add padding in a single direction, add a 'Padding (direction)' class before the main padding class. An example of this might be Padding Top Padding L.
You can add padding to the Top, Bottom, Left, Right, Vertical and Horizontal sides of an element.
Margin Blocks
To add spacing outside of a block (margin), use a Div with a 'Margin' class. This consists of the word 'Margin' followed by a sizing. For example, 'S'. An example of a full padding block class might be Margin XL.
To add Margin in a single direction, add a 'Margin (direction)' class before the main margin class. An example of this might be Margin Top Margin L.
You can add margin to the Top, Bottom, Left, Right, Vertical and Horizontal sides of an element.