Style Guide MVC

Icons

The SVG for family meals have been place under the following folder:

/svg/family-meals/2020/

You can add these SVG using the image tag code:

<img src="/svg/family-meals/2020/activation-icon.svg" alt="Title"  />

activation-icon.svg

broadcast-icon.svg

consumers-icon.svg

employees-icon.svg

faq-icon.svg

graphics-icon.svg

infographics-icon.svg

newsletter-icon.svg

press-icon.svg

proclamation-icon.svg

research-icon.svg

social-icon.svg

story-icon.svg

createawareness-icon.svg

encourage-icon.svg

highlight-icon.svg

joinforces-icon.svg

incorporate-icon.svg

raiseawareness-icon.svg

rally-icon.svg

fork-spoon.svg

fmi_fm_logo.svg

To add the hover effect over an icon and add the circle:

<a href="/link">
 <div class="mg--circular center-block"><img src="svgfile.svg" width="58px" alt="title" /></div>Messages for Employees
</a>

Messages for Employees

Padding's

padded

padded-top-100

padded-top-m

padded-top-s

padded-bottom-m

padded-bottom-s

padded-y

padded-x

padded-r

padded-r-xl

padded-r-xxl

padded-l

padded-l-xl

padded-l-xxl

Jump links Template

On the MVC version of the Jump to links there is a few extra steps:

Use Family Meals Mvc Sidenav , this template would have an empty side bar.
(* optional but helps on styling)Add a Grid-12 to the sidebar and on edit mode add the class "menu-holder" so the container should look like this sf_1col_1in_100 menu-holder
In the left sidebar add a contentBlock and add links on separate lines. Use a hash symbol in the link like this
```
<a href="#">Link to section 1</a>
<a href="#">Link to section 2</a>
```
(required step) On the same contentBlock click Advance and at the WrapperCssClass field add the class: scroll-anchor
At the right column each link that shows on the left side navbar should be added to a grid that has the class section and on the labels have the exact words as the link.

Sidebar Templates containers

Templates that have sidebars are flexible to have wide content or content in a reader container, in most cases a page should start with the Container grid with the following class:

container reading-container section

Example

On the side content it is important the class section, since this class will add the corresponding padding to move the content down bellow the logo, the container class can change to make the content wider or thinner.

Images that open on a lightbox

A lightbox popup is an elegant window overlay that appears on top of a webpage, blocking some of the content on the page to display Images, videos or other type of content.

Add a Grid layout and add the following class to it: gallery.
Add Images using the Image widget.
Select an image size for the thumbnail, for the infographics we used the option Large 350px width.
Check the box for This image is a link... and on the options this will give you select To the image in its original size and click save