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
Title
broadcast-icon.svg
broadcast-icon
consumers-icon.svg
consumers-icon
employees-icon.svg
employees-icon

faq-icon.svg
faq-icon
graphics-icon.svg
graphics-icon
infographics-icon.svg
infographics-icon
newsletter-icon.svg
newsletter-icon

press-icon.svg
press-icon
proclamation-icon.svg
proclamation-icon
research-icon.svg
research-icon
social-icon.svg
social-icon

story-icon.svg
The Grocery Industry's Story
createawareness-icon.svg
createawareness-icon
encourage-icon.svg
encourage-icon
highlight-icon.svg
highlight-icon

joinforces-icon.svg
joinforces-icon
incorporate-icon.svg
incorporate-icon
raiseawareness-icon.svg
raiseawareness-icon
rally-icon.svg
rally-icon

fork-spoon.svg
fork-spoon
fmi_fm_logo.svg
fmi_fm_logo

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>

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:

 

  1. Use Family Meals Mvc Sidenav , this template would have an empty side bar.
  2. (* 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
  3. 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>
  4. (required step) On the same contentBlock click Advance and at the WrapperCssClass field add the class: scroll-anchor
  5. 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.

  1. Add a Grid layout and add the following class to it: gallery.
  2. Add Images using the Image widget.
  3. Select an image size for the thumbnail, for the infographics we used the option Large 350px width.
  4. 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