Event Style Guide MVC

Print Codes

* print-hide - Applied to a layout block, this will hide anything inside on print views. (I added this to the date control and the Expand All button on the schedule.)

* print-only - Applied to a layout block, this will make it so anything inside will ONLY show on print. You could add a message that shows up on printed versions of the schedule.

Announcement Cards

A new alternative to the announcement cards is a List. To create this, first create a list of announcements you want to make by going to Content -> Lists in Sitefinity, and creating a list. In each item, fill out these fields:

Title (the title of the item)
Content (the big content area, will be displayed below title)
Link (the URL you want the button to go to)
Link Label (what you want the button to say)
Primary Image (the image to the left)

Once you've created your list, all you need to do after that is drop in an MVC List widget, select your List, and choose the "Card carousel with count" template. See example below.

Addressing Supply Chain Through Collaboration

Bringing food from farm to table requires sophisticated and efficient supply chains. FMI works with food retail supply chain professionals to facilitate networking, surveys, benchmarking, and research studies that move the industry and the supply chain forward.

View Resources

FMI Supply Chain on the Road

Come support RILA LINK2021 in August! Let's join together in a show of solidarity with our industry partners and friends at this relevant supply chain event. FMI Members use code FMILINK21 to receive a special discount. Breakout sessions and retailer-only round tables, general sessions, executive insights and Expo Experience are featured.

Learn More

Use these cards to call out news or other areas of the event. Keep in mind you also have the curation tiles, so you want to pick and choose how best to use each feature. These announcements cards work better for items with more copy. Curation tiles work well for images and lite copy. Having both could make for an overwhelming user experience. Curation tiles can also be reused over and over again because they are saved in a database. Cards are one-offs, meaning they are not saved in a database.

Drag over a Column-100 layout. Under classes & labels, in row field put wrapper-carousel-one mg-carousel--single-slides. Label column 1 the announcements.
Back under Content, drag over a Card MVC widget. Each card is one item in the carousel. Add the Heading, Text, Image, Call to Action label, and URL link.
Expand the "More Options" section in the card's options and select the "Card, single slide" template.
To add another card, drag over another Card MVC widget and fill in the items again. You can have as many cards to the carousel as you'd like and change the ordering of them.
You might also want to add a title above the announcements cards.

Image 2 Michael Siakpere at Festival Foods store opening event2

Lorem Ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum turpis eu accumsan sagittis. Nullam bibendum libero quis efficitur gravida. Aliquam vestibulum efficitur sapien, vitae rutrum nisi ultrices vel. Vivamus hendrerit lorem sit amet erat eleifend ullamcorper. Nullam nec posuere tortor. Nulla a hendrerit eros. Aliquam eu volutpat nibh, et mollis nisl. illustration-announcements-1

Lorem Button

Praesent in porta tortor

Mauris tincidunt diam ut dignissim ultrices. Duis nec tempor ante. Nullam commodo odio vulputate erat vehicula, vel dictum ligula porta. Donec sit amet mi massa. Integer tincidunt elementum elit, et tempus risus aliquam quis. Etiam sed ornare neque, at egestas odio. Etiam auctor placerat posuere. Phasellus ut placerat velit. Donec quis velit pulvinar, venenatis nunc non, porta eros. Duis dapibus erat urna, eu tempus arcu pulvinar nec. Donec molestie nec nisi sit amet pretium. Curabitur rhoncus fringilla lacinia. illustration-announcements-2

Link

Side Navigation Images/ Ads

Drag in a Column-66-37 layout element.
In the right column, drag in a Content Block
Edit the Content Block and add your images. (Ads shown are 330px x 100px)
Highlight the image and click on the hyperlink (globe with the chain icon) to link your image.

Cards

Drag in a Column-33-33-33 layout element.
Add container equal-heights section push-down classes to the Row.
In each Column add card--black
In each column, enter two content blocks. The top will be your title and the bottom your content. h3 is recommended for the title

Title

Ignite valuable business relationships through networking and sharing best practices.
Take home actionable solutions to problems that impact the bottom line.
Gain valuable tools to drive sales, stimulate growth, improve controls and ensure compliance.
Earn CPE credits.

Title

Ignite valuable business relationships through networking and sharing best practices.
Take home actionable solutions to problems that impact the bottom line.
Gain valuable tools to drive sales, stimulate growth, improve controls and ensure compliance.
Earn CPE credits.

Title

Ignite valuable business relationships through networking and sharing best practices.
Take home actionable solutions to problems that impact the bottom line.
Gain valuable tools to drive sales, stimulate growth, improve controls and ensure compliance.
Earn CPE credits.

Speakers Widget

Insert a 100% Layout Element into an area of the page that spans the whole page width.
For the wrapper set: wide-carousel banded-secondary section-inner
Create the Speakers title by dragging in a 100% Layout Element into the previous layout element and entering centered in the wrapper and adding container to Column 1.
For the speakers widget, drag in a 100% Layout Element as a sibling to the title area. Label the wrapper title and add container to Column 1.
Within this layout element, drag in a Speakers widget (the one that doesn't have 'MVC' logo)
Set the content by Categories and choose your event. Set the List Settings > List Template to Speaker Carousel. Set the list settings to 'No Limit and paging'. 'Use limit' is also okay. Save.
Optionally, you can add a button under the speakers by adding another 100% layout under the Speakers 100% widget, label the wrapper component and use a content block into this layout widget.
Paste in this for the button and replace the # with your link

<p style="text-align: center;">
<a class="button-secondary button--big" href="#" title="Speakers" target="_blank" rel="noopener noreferrer">Full Lineup</a>
</p>

Speakers

Steve Diamond

Senior Cyber Threat Intelligence Analyst, RH-ISAC

Kaitlyn Palatucci

Engagement and Strategy, IT-ISAC

Jonathan Braley

Director, Threat Intelligence, IT-ISAC

Tina Pedrick

Manager, Education, FMI

Dean Hobbs

Principal, Consulting, US Operations Leader for Finance & Performance, Deloitte

Katherine Martinez

VP, Labor Relations, Sephora North America

Reveal Media

Checkpoint Systems

Alpha Vision

Hayley Psaltis

Corporate Internal Audit Director, Alex Lee, Inc.

Lari Harding

SVP, Healthcare Industry Affairs & Strategic Partnerships, Inmar Intelligence

Jennifer Shawgo

Senior Director of Technology Strategy & Programs, FMI

Kim Myrdahl

Senior Vice President, Deputy General Counsel, Chief Ethics & Compliance Officer, United Natural Foods, Inc.

Jonathan Cohen

Partner, K&L Gates

Jackie Welch

Vice President & Deputy Counsel, Litigation, The J.M. Smucker Company

Heather Egan

Partner, Strategic Advisor, Cyber Crisis Response, Morgan Lewis

Hih Song Kim

Chief Legal Officer and Corporate Secretary, Primo Brands

Shelly Palmer

Professor of Advanced Media in Residence, S.I. Newhouse School of Public Communications, Syracuse University and CEO, The Palmer Group

Todd Fernandez

Director, Loss Prevention, Stater Bros. Markets

Cita Doyle

Vice President, Sales and Marketing, InstaKey Security Systems

Full Width Banners

Note: when the below refers to making two layout blocks "neighbors", you should make sure they're both part of a parent layout element, but not one within the other. The easiest way to do this is to label the parent element (the one you're dragging two into), so you can see two distinct layout blocks, one above the other. If you only see one box to drop content into they're probably nested.

add a 100% layout block into an area without any containers/ layout elements to make sure it takes up the full width of the page and add js-check-content classes to the wrapper. Label this area 'Banner Area'
add two 100% layout blocks into the layout block from the previous step (these two should be neighbors and not nested within each other)
add a apply-hero-image class to the wrapper of the first layout block. Label this area 'Banner Heading'
add banded-bright padded classes to the wrapper of the second layout block and add container padded--more js-check-me-for-content classes to the Column 1 field. Label this area 'Widgets here'
add two 100% layout blocks into the 'Banner heading' area. These should also be neighbors and not nested.
add hero-image hidden admin-display classes to the wrapper of the first layout block. Label this area 'drop an image widget here'
add container gutter-top--big classes to the wrapper of the second layout block and add banded-bright padded--more classes in the Column 1 field. Label this area 'Banner heading'
When adding the image widget for this area, you want to make sure it's at least a normal-size monitor's full width (so at least 1920px wide). The height is flexible, but keep in mind that it will push the page down if it's tall, so you ideally want a wide image that's not too tall.
When adding a content block for the banner heading, you should use an h1 tag if you're using this to show the title of the page. If you're using it anywhere else, use an h2.

Page Title

Content / Widgets here

Image Carousel

Drag in a 100% width layout and add a relative section class to the wrapper.
Within this layout, drag in another 100% layout and add a component class to the wrapper. In Column 1, add wrapper-carousel-one collage-carousel
For the images, drag in a content block into this component block and enter the following in the HTML tab of the content block. Treat each content block you drag in as one slide. In each slide, place three images

<img alt="replace" data-src="/images/default-source/supply-chain-library/supply_chain_conference_02.jpg?Status=Temp&amp;sfvrsn=e42e706e_2" class="loaded" />

<img alt="replace" data-src="/images/default-source/supply-chain-library/supply_chain_conference_01.jpg?Status=Temp&amp;sfvrsn=e62e706e_2" class="loaded" />

<img alt="replace" data-src="/images/default-source/supply-chain-library/supply_chain_conference_podium.jpg?Status=Temp&amp;sfvrsn=1a2e706e_2" class="loaded" />

Please note, these are not normal image elements and will may not display an image properly while editing or previewing. Replace the links within the data-src quotes with your images (you can get the links to images by viewing the image in the Image library of sitefinity; you can also use links from another host). Replace the 'replace' within each alt with a descriptive title of your image. Recommended image sizes:
- Left Image: 308px by 410px
- Center Image: 807px by 457px
- Right Image: 514px by 386px

Horizontal Schedule Area

Drag in a 100% layout. Add section to the Wrapper and container push-down to Column 1
Drag in a content block for the title.
Drag in an Events Widget (with MVC in the logo) underneath your title.
In Content select your event.
In List Settings, Use Limit -> 3 is enough. List template set to Events Session Horizontal List

06.05.19 5PM

Welcome & Industry Narrative: Transportation Imperative

Association leaders from FMI and GMA share an industry-wide perspective on the impact of transportation issues and solutions projects at all points along the supply chain and the collaborative relationships that will carry us forward.

06.05.19 5:20 PM

The U.S. Transportation Situation

Hear a macro view of the landscape of our federal transportation environment, including FMCSA efforts that offer the potential to create more jobs in the commercial motor vehicle industry while maintaining the highest level of safety.

06.05.19 5:50 PM

Treat Your Transportation Spend as an Asset and Build a Better Bottom Line

Too many shippers try to control the uncontrollable when managing their transportation costs. Within the uncertainties of today’s transportation environment, this session will help you unlock the value of investing in your transportation area as an asset, managing from the inside out, and controlling the things you truly can control to drive savings directly to your bottom line.

Horizontal Schedule Area - Specific Single Sessions

Go to Layout --- click on Grid Widgets ----- Choose the grid 4+4+4 layout
Drag in the grid 4+4+4 layout. Add section to the Wrapper and container push-down to Column 1
Drag in a content block for the title.
Drag in the Conference Sessions Widget
In the Single Items Settings choose "Auto Generated Page" and then choose "Conference Single Form" under the Detail templates
Go to the Content tab and choose "One particular conference session only" and select the conference session you want to show.

Event Agenda Set Up

Preparing the Conference Sessions Widget

Log into the Sitefinity
Click on the Content tab
Go to Conference Sessions
Enter:
- Title
- Start Date and Time, End Date and Time
- Content (this is what will display on the detail view page)
- Add Sponsor(s)
- This will replace adding the sponsor logos to the “Content” section above
- PRO TIP - Add a tag. Adding the same tag to all your Conference Sessions can help you sort through the larger database of Conference Sessions more easily. Be sure to use the SAME tag on each session for the schedule you are building. For example - 24 Legal and 2024 Legal are two different tags. Then when you're looking through all the Conference Sessions you can use the funnel icon and then custom filters and filter by tag to find the sessions related to your conference.

Add Tracks
- Then publish the new Conference Track.
- You will need to go to Conference Tracks under the Content tab. Once open click on Create a Conference Track and proceed to give your new “Track” a title and an assigned hex code for color coding. You can also add a description for the “Track”. -
- **Adding additional custom “Tracks” for any event
  that has 9 “Tracks” which are essentially event session types already added: Keynote, Breakout, Network/Social Event, B2B Meetings, Track 1, Track 2, Track3, Track4, Track5. Conference Tracks-You will see that there is a Content Type named
- Select and add the desired Tracks for displaying in the Event Key and adding the color coding to the Event Layout.
  are replacing “Categories” where you previously set the key color coding.Tracks
- Add Speakers
  -Under Related Speakers, add any speakers for the session (this might be something you come back and do at a later date).
Then publish the Session
Note: You can Duplicate sessions to save time. Duplicating copies over all the content and categories and you can make adjustments from there.
Note: To filter by a specific event, use the funnel icon on the right-hand side of the page listing all the Conference Sessions. Click on Custom Filters and filter by Category for sessions Categorized by a specific event. (Please note, using this feature assumes that all the sessions have been properly categorized by those who entered the content originally)

How to Use the Event Widget

After you have entered your Conference Sessions, go to Content and select Events.
Note: You can duplicate an event to save time and make adjustments.
Click the green Create and Event button.
Enter
- Title (this does not get displayed anywhere)
- Event start date and time
- Event end date and time
- Time zone
- Speakers Page – enter the URL for the Event’s Speakers Page
- Schedule Page – enter the URL for the Event’s Schedule Page
- Under Related Data, click the plus sign and select the Conference Sessions for this Event. You can search for them by title or click on Show All Conference Sessions to see the full listing.
- Once you have added all the Conference Sessions for your Event, you can hover over the three vertical dots next to each Conference Session and a four way arrow should come up. This allows you to move the Conference Sessions so they are in the correct order.
- Publish the Event.

Adding the Conference Tracks and Event Widget to the Agenda Page

Go to the Pages tab at the top of Sitefinity.
Find the Schedule page for the Event you are working on and click to open the page.
You will need to add both a Conference Tracks widget and an Events widget to the page
You will find the Conference Tracks widget in the widget listing to the right under Conference Sessions – Add this ABOVE the Event widget on the page
Click on Edit once open, under Content select “Selected conference tracks and add the tracks wanted for this event for example: Keynote, Breakout, ect.
These will then display on the Key in the order that you have added them. You are able to reorder at any time by clicking on “Selected” and dragging them into your desired order. Click done selecting.
Click on the List settings tab and under “Sort conference tracks” in the 1st dropdown select “As set manually” and in the 2nd dropdown select “Event agenda track”. Lastly, click on “Single item settings” and set the Detail template dropdown to “Conference Track”
It’s very likely there is already an Events widget on the page. If so, Edit the Event widget.
On the Content tab change the event selected to the new event. On the List settings check the “No limit and paging” and on the “Sort events” dropdown select, “As set manually” on the “List template” dropdown you will want to choose “Event agenda”.
On the Single item settings select “Auto-generated page” and “Event details” in the “Detail template” dropdown.
Click on Advance.
Click on Model
Change ContentViewDisplayMode field to say Master
Click Save.
The Event widget will update with your new Event Conference Sessions. You can preview the page and then publish.
If your page is currently hidden, contact Nathalie, Bianca or Kelli to unhide the page. You can also use the website help form: http://intranet.fmi.org/WebsiteRequest

How to Use the Speaker Widget

Go to Content and select Speakers.
Note: You can duplicate a speaker to save time and make adjustments.
- Note: If a speaker is already in the system you don’t need to add them again. For example, Leslie Sarasin has been a speaker before!
- Enter:
- Title – the speaker name
- Bio
- Last name
- Title
- Related Images – add headshot. FMI Staff are sized to 125x125. Only need to resize if the file is very large. Be sure to save the image in an image file that makes sense—defaults to 2015 Community Outreach Awards (which does not make sense)
- Note: If a speaker does not have a headshot, use one of the headshot mock ups that is branded for the event. These are saved here:
Under Related Data, choose the event the Speaker is speaking at. This can be more than one Event.
Publish the Speaker

Update The Conference Session with the Speaker

Click on the Content tab
Go to Conference Sessions
Find the Conference Session the Speaker is speaking at and open it. Remember the Filter feature to save time.
Under Related Data, click on the plus sign and add the Speaker to the Conference Session.
Click Publish

How to Put the Speakers Widget on the Page

Go to the Pages tab at the top of Sitefinity.
Find the Speaker page for the Event you are working on and click to open the page.
It’s very likely there is already an Events widget on the page. If so, Edit the Event widget.
Change the Event selected to the new event. On the List Tab check the No limit and Paging and on List Template select Speaker.
Click on Advance.
Click on Model
Change on ContentViewDisplayMode field the value to Automatic
Click Save.
The Event widget will update with your speakers. You can preview the page and then publish.
If your page is currently hidden, contact Nathalie, Bianca or Kelli to unhide the page. You can also use the website help form: http://intranet.fmi.org/WebsiteRequest

Creating Featured Speakers Section

Drag in a 33% + 34% + 33%
In the wrapper add container equal-heights section push-down
In each of the three columns add card card--thirds
In each card, drag in an image widget and select your image. Using the same size image across all three cards is recommended
Underneath each image (while still within the card), drag in a 100% layout element and label the wrapper card_text
Within this new 100% layout element, drag in a content block and/or an image widget and fill with desired content.

Sponsor Area

Drag in a 100% layout block.
Drag in a javascript widget. Click the "Write Javascript" tab. Enter this snippet:
```
            window.supporterUrl = 'URL_HERE';
        
```
Replace URL_HERE with the url to your sponsors page, while leaving the quotes
Drag in a content block. Edit the block and click on "Advanced", scroll down to "CssClass" and enter sfContentBlock mg-thumbnails-wrapper--4-across
Click back to the "Simple" view and under the html tab, enter this html:
```
<div class="logo-wall">&nbsp;</div>    
```
Underneath the content block, drag in a Supporters (non-mvc) widget and select the category of your event. In List Settings, set it to "No Limit and paging" and set the List template to "For developers - Supporters Info"
To add the What Your Logo Featured Here? Use this code in a content block and change the link highlighted in yellow:
<p style="text-align: center;"> </p>
<br />
<br />
<br />
<h4 style="text-align: center;"><span class="arrow-heading">Want your logo featured here?</span></h4>
<p style="text-align: center;">
<a class="button-secondary button--big" href="http://www.dailylead.com/fmi/index.jsp" title="Speakers" target="_blank">Become a Sponsor</a>
</p>
<p> </p>

Smaller Sponsors List

To create a smaller sponsors list, simply drag in a Supporters widget (non-MVC). You can put this almost anywhere you'd put another content block, but you want at least half the screen or so to keep it from looking squished.
Click Edit on the widget.
On the first tab, click Selection of Supporters, and select the category you want to filter by (usually Events > Name of Event).
Under the List Settings tab, select a limit (if you only want to display a limited number of sponsors) or select "No limit or paging" to show all sponsors that fit your category.
Optionally, in the sort dropdown, select Title (A-Z) to alphabetize your sponsors.
Select a list template from the last dropdown. You want one of the options that looks like this:
```
mg-thumbnail-list--5-across
```
The number in the template you select will be how many columns are used, so try to set a good amount for the amount of space you have and/or the number of sponsors you have. (e.g.: don't choose 5 columns if you're displaying in a very small space; don't choose 4 columns if you have 9 sponsors since you'll have one on a row all its own.)

Setting up the Attendee List

Add a 100% layout block to the page.
Add the container class to Column 1.
If you don't have a header image or text above, add the section-2x class to the wrapper. You'll likely want at least a content block with an h1 element and the page title here.
Drag in a content block for the attendees list to use.
In the content block, switch to the HTML editor paste this text:
```
<div id="pull" data-meetingid="442BBE00000008">&nbsp;</div>
```
Change the number assigned to data-meetingid to the ID of the Maxx meeting that you wish to show the attendees of. Make sure you leave the quotes intact.

Curation Tiles

Drag in a 100% width layout and add a banded-bright section-inner class to the wrapper and a container class to Column 1.

For creating a block-like treatment, first look at the number of rows you need (rows being dictated by complete lines of white space that span the entire treatment). Then, for each row, choose either a 33%+67%, 67%+33%, or a 33%+34%+33% layout element. In any case, name the wrapper class tile--banner .

In each column drag in a Tiles widget (under Curated Tiles, non-mvc). Chose to display 'one particular tile only'. Under Single Item Settings/ Detail Template, select Matrix - Single Tile. Small and medium tiles are reserved for columns of 33% or 34%, while large tiles are for 66%. Small tiles can be stacked in the same column.

Since 100% can't be divided three ways evenly, some alignment issues can arise. When creating this treatment, choose one column to apply the extra 1% to and stick with it throughout every row.

Suggested Image Sizes:
Small: 370px x 220px
Medium: 380px x 450px
Large: 760px x 450px

Exception occured while executing the controller. Check error logs for details.

Awards

Small Test Tile

Description with smaller text

small black tile

smaller text

Awards

Medium Test Tile

Description Here

Exception occured while executing the controller. Check error logs for details.

Font Sizes

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Normal Text

Navigation

When using a navigation widget:

Go into the widgets' advanced settings
For the SiteMapProviderName option set: CustomSitefinitySiteMap - Setting this option will enable protected pages to display in the navigation.

Horizontal Lists

add a list-across class to a list to make it display horizontal.

I am a list item
I am also a list item!

<ul class="list-across">
	<li>I am a list item</li>
	<li>I am also a list item!</li>
</ul>

add a list-across-divided class to a list to make it a divided horizontal list.

I am a list item
I am also a list item!

<ul class="list-across-divided">
	<li>I am a list item</li>
	<li>I am also a list item!</li>
</ul>

Buttons

<ul class="list-across">
	<li><a href="#" class="button">Hello world</a></li>
	<li><a href="#" class="button-secondary">Hello world</a></li>
</ul>

To make buttons bigger add a button--big class.

<ul class="list-across">
    <li><a href="#" class="button button--big">Hello world</a></li>
    <li><a href="#" class="button-secondary button--big">Hello world</a></li>
</ul>

Text size options

This is some normal text. This is some normal text. This is some normal text. This is some normal text. This is some normal text.

Use a small-text class for some small text. This is some small text. This is some small text.

Use a medium-text class for some medium text. This is some medium text. This is some medium text.

Use a large-text class for large text. This is some large text. This is some large text.

Use a larger-text class for some larger text. This is some larger text. This is some larger text.

Use a largest-text class for the largest text.

Layout - Max width wrappers

This layout column has a max width (the content within does not strech to the edge of the browser on wide viewports).

Use a container class on a layout column to apply the sites' standard max width restriction.

This layout column has a more comfortable reading line length.

Add section to the wrapper and container and reading-container class on the same column to shorten the max-width restriction.

This layout column is more narrow.

In addition to the container class, also use a reading-narrow class on the same column to shorten the max-width restriction.

This layout column has the most narrow max width of all.

In addition to the container class, also use a reading-slim class on the same column to shorten the max-width restriction.

Layout Spacing

This layout block has "gutter-bottom'" class in the wrapper - which will add bottom margin.

This layout block has "component'" class - which will add top and bottom margin.

This layout block has "section'" class - which will add more top and bottom margin than "component".

This layout block has "push-down'" class - which will add more bottom margin (twice as much as gutter-bottom)

I've been pushed down.

Divided columns

Drop in a multi-column layout block and add a divided-columns class to the wrapper.

Add a equal-heights class if you want the columns to appear equal in height.

Add a center-inside class if you want the content within the columns to be vertically centered.

"Banded" areas

The default background of the site is a light gray color.

This area has a '"banded" class for the background - and also a "padded" class for some inner spacing

Same as above but for this color background use '"banded-alt" Color code #E8E8E8

... "banded-secondary"

... "banded-tertiary"

... "banded-accent"

... "banded-dark"

... "banded-special"

... "banded-special--alt"

Mobile Display

If for some reason layout elements don't stack on mobile - add a mobile-zero class to the layout element.

Responsive Embed

Use an embed-container class on an element wrapping rich media (like a youtube iframe embed)

Media Box

Add a media-box-heading class to an element for this heading style

Add a two column Sitefinity layout element and give the wrapper a media-box class.

Add a two column Sitefinity layout element and give the wrapper a media-box class.

Secondary Media Box

Drag in a two column layout and add a media-box--secondary class to the wrapper.

This variation of the media box is intended to span the width of the screen, so make sure that you don't set this up inside another layout area with a max width.

Call to action

Add a two column layout block and add a call-to-action class on the wrapper.

Do something

Equal Columns

If you are using two columns put a equal-heights class on the main wrapper layout block. This will stretch the background color of both columns so that the columns appear even in height.

Do something

Content Bar

Some bold text
This text should be short.

hello@hi.com
222-222-2222

Another content bar

Add a two column (33/67) layout element and add a class content-bar to the wrapper.
Add a content-bar__head class to the first column (the first column should mainly just be a heading and icon).
Use any of the "banded" classes to apply the background colors to these columns.

Use a no-flex class on a new layout element within a columb to undo the horizontal layout of child elements.

Blog Cards

Drag in a 100% column layout. Add a section-2x class to the wrapper and add container in Column 1.

Into this layout element, drag a Blog Posts MVC widget. Select "Use Limit" and set to 3 items total. Choose "Matrix blog post cards" as your "List template."

In the Single Item Settings, under "Open Single Item In...", choose Selected existing page > (Voice of Food Retail Blog) > View

Use a Content Block with text (in H3 & Strong) for the heading and put it right above the blog card content.

To add a button to the blog below the cards, add a Content Block there and copy this HTML:
<p style="text-align: center;"><a href="/blog" class="button" sfref="[f669d9a7-009d-4d83-ddaa-000000000002]eabdcb02-24aa-6724-9237-ff0000c12749">Read our blog</a></p>

Blog posts heading

Meet a Dietitian in the Digital Space, Connecting Tech and Health

Apr 16, 2026

Registered dietitian nutritionists in the food industry use digital product management to connect healthcare, nutrition and technology, helping grocery stores deliver accessible, personalized health and wellness solutions.

By: Krystal Register, MS, RDN, LDN, Vice President, Health & Well-being, FMI

Did you know that registered dietitian nutritionists (RDNs) in the food industry are working in the digital world to connect people to technology for improved health?

Join us for a peek behind the scenes to learn more about a day in the life of Jennifer Cotton, MPH, RDN, LD, who specializes in digital product management for H-E-B Wellness Clinics, where primary care physicians, physical therapists and registered dietitians work together, helping employees and customers achieve their health goals.

Jennifer works to bring nutrition and health ideas to life, making sure that digital solutions are intuitive and easy for users and aligned with business priorities, strategic goals and company messaging. Essentially, she builds the bond between healthcare providers and customers while ensuring all necessary privacy and security boxes are checked.

As customers look for guidance, education and solutions, Jennifer explains how the grocery store is becoming a true destination for health and well-being. H-E-B is integrating wellness services, digital tools and expert support to connect food to health right at the grocery store. Jennifer exemplifies how RDNs play a critical role in bringing the science of nutrition to empower customers’ everyday decisions in a credible way.

From FMI's 2024 Report on Food Industry Contributions to Health & Well-being, we know that dietitians across the food industry are working in various leadership roles, strategizing with their companies on everything from private label and merchandising to food as medicine and ecommerce.  This video is the third in a series to highlight the incredible work of dietitians in unique roles across the food industry. 

Click to watch  how Jennifer puts her personal passion and professional expertise to work!  

Read our blog

News Cards

Drag in a 100% column layout and add a section-2x class to the wrapper and container in Column 1.

Into this layout element, drag in a News MVC widget. Select "Use Limit" and set to 3 items total. Choose "Matrix news cards" as your "List template.

In the Single Item Settings, select existing page > Newsroom > Latest News > View

Latest News

FMI Statement on March CPI Food Price Numbers

Apr 10, 2026

Today, FMI commented on the March Consumer Price Index (CPI) numbers from the U.S. Bureau of Labor Statistics (BLS), which shows a 0.2% decrease in food-at-home prices for March and a 1.9% increase over the last 12 months....

FMI Research: Investment in Attracting Frequent Seafood Shoppers Essential to Category Success

Mar 16, 2026

Seafood department sales and units may seem stable, but The Power of Seafood 2026 report from FMI—The Food Industry Association, debuting at the Seafood Expo North America.....

AMC Exhibitors Donate 9,000 Pounds of Meat and Poultry to Capital Area Food Bank

Mar 11, 2026

Exhibitors at the Annual Meat Conference donated nearly 9,000 pounds of meat and poultry products to the Capital Area Food ...

Tile Banner

Generally used on landing pages.

Drag in a three column layout and add tile--banner and tile--row classes to the wrapper.

This variation of the tile-banner is intended to span the width of the screen, so make sure that you don't set this up inside another layout area with a max width.

In each column drag in a Tiles widget (under Curated Tiles, non-mvc). Chose to display 'one particular tile only'. Under Single Item Settings/ Detail Template, select Matrix - Single Tile.

Resource Carousel

add a 100% layout block and give the wrapper wide-carousel banded-secondary section-inner classes. Under Labels - Label column 1 'resources'.
add two 100% layout blocks to the new resource area (these should be siblings and not nested within each other). edit the first one and give the wrapper a centered class. give column 1 a container class. Under Labels - Label column 1 'title'.
on the second layout area give the wrapper a title class. In column 1 add a container class. Under Labels - Label column 1 'resources widget'.
drop a content block into the 'title' area and add some text for the carousel title.
drop a resources widget into the 'resources widget' area. Please use a limit less than or equal to ~10. Choose Resource Carousel in the List template settings.

FMI Fresh Food Resources

The Power of Seafood 2026

The eighth annual Power of Seafood explores shoppers’ attitudes and behaviors regarding the seafood category, which attracts affluent shoppers with above-average basket values.

The Power of Meat 2026

The Power of Meat provides an annual update of shopper habits regarding meat and poultry pre-trip, in-store and at home.

Power of Produce 2026

The Power of Produce identifies the biggest trends in consumer purchasing and consumption of fruit and vegetables.

Grocery Shopper Snapshot: January 2026

This brief report provides an update on shoppers' sentiment, evolving grocery habits and the role of technology in grocery shopping.

2025 FreshForward Action Guide

This 2025 Action Guide spotlights key takeaways from the FreshForward Conference recommended by attendees for each of the presentation tracks — Labor Challenges, Health & Well-being, and Capturing Meal Occasions.

Man holding a grocery basket looks through an illustrated foodservice department at a grocery store.

Framework for Retail Foodservice Success

FMI and Kearney, the global professional services organization, have pooled efforts to describe the robust rewards available to retailers who can successfully tap into the foodservice at retail market.

Power of Foodservice at Retail 2025 report cover

The Power of Foodservice at Retail 2025

This tenth annual report explores shopper perceptions, attitudes, and behaviors regarding deli-prepared foods in grocery stores. The deli foodservice segment continues to gain momentum.

The State of Fresh Foods 2025

Perimeter departments are top of mind for enhancing store differentiation. The State of Fresh Foods 2025 details how the food industry is increasing investments in fresh and working to overcome hurdles.

Report cover: The Food Retailing Industry Speaks.

The Food Retailing Industry Speaks 2025

The food industry is conditioning itself by prioritizing strong customer experiences and ensuring resilient business operations.

U.S. Grocery Shopper Trends 2025: The Logic of Food Shopping

Grocery shoppers constantly navigate the tension between control and flexibility when managing their household spending.

The Power of Health and Well-Being in the Food Industry 2024

FMI's sixth edition of The Power of Health and Well-being in the Food Industry relays new angles on consumer health and well-being perspectives, national nutrition-related priorities and compelling opportunities for the food industry.

The Power of In-Store Bakery 2024

The Power of In-Store Bakery 2024 is the third annual report exploring shopper perceptions, attitudes and behaviors regarding in-store bakery in grocery stores.

Grocery Shopper Snapshot: Hispanic Edition

This brief report provides insight into Hispanic grocery shopping habits, including attitudes, behaviors and purchase drivers.

Power of Plant-Based Alternative Foods and Beverages 2024

This report dives into consumer perspectives and habits regarding plant-based alternative foods and beverages.

Finding Growth for Food & Beverage Retail:

Winning Eating Occasions Throughout the Day – See how to be successful by considering dayparts, such as snacks, to inspire experimentation and create new memories through food.

Forms

Each form component should be wrapped in a layout element with one of these classes:

mg-text
mg-select
mg-checks
mg-radios
mg-textarea
mg-captcha
mg-upload
mg-submit

Those classes can be added in the More options or Appearance sections of the form element edit menus.

Text Box

Select a choice

Select a choice

First Choice

Second Choice

Third Choice

Select a choice

First Choice

Second Choice

Third Choice

Textarea

File upload

Icons

All icon spans must include an "fmi-icon" class in addition to the classes listed below. (e.g. <span class="fmi-icon fmi-icon-calendar"></span>)

Also, if you will be using the icon inline with some text next to it: use a 'spacer-left' or 'spacer-right' class like so:

<span class="fmi-icon fmi-icon-calendar spacer-right"></span> calendar

See all icons

Large Icons

To display a large icon, use a large-icon class on the icon element.

Badge Icon

Add a icon-badge class to an icon to give it a dark circular background.

Section / Page Icons

To edit/add section icons (the green circle with an icon that appears on most pages).
In the admin navigate to Content > Section Icons

Using one of the CSS classes from this page is the preferred way of setting the section icons.

Social links

add a social-link class to a link which points to a social media url and an icon will get added to the link.

Images with Captions

In the Title field of your image, prefix your title with mg-caption: . The caption will be added automatically.

MAXX Categories

Here are the updated IDs for all Categories.
If the category is a "sub category" (i.e. nested under something else), the ID of its parent appears in the third column - otherwise this column says "NULL" and can be ignored. We included this because it is important for determining whether you're looking at the "Training & Development" (ID=20) which is its own top-level category or if you're looking at the "Training & Development" which is nested underneath Education.

27	Nutrition
D	Food Safety & Security
12	Government Relations
13	Human Resources
20	Training & Development
14	Industry Relations
1	General Marketing & Merchandising
28	Crisis Management
23	Financial Management
4B	Energy
5	Coupons
9	Sustainability
64	Education
16	Meat & Poultry
19	Produce
1C	Seafood
17	Consumer Behavior & Trends
18	Pharmacy
42	Retail Dietitian
11	Category Management
8	Distribution
A	Research
3D	Food Waste
2C	Deli / Bakery
47	Supplier Diversity
2E	Payments
2F	Transportation
30	SQFI
32	Asset Protection
51	Risk Management
52	Safety
3C	Corporate Social Responsibility
33	Consumer Affairs
54	Animal Welfare
65	Signature Events
57	Safemark
35	Health & Wellness
43	Family Meals
36	Fresh Foods
37	Private Brands
38	Retail Operations
46	Total Store Collaboration
4C	Packaging
39	Technology
4E	Digital Shopper
5C	Advertising
5D	Social Media
5E	Loyalty Programs
5F	Communications
60	Shopper Services
3B	Supply Chain
34	Cyber Security
3E	Food Fraud
66	Training & Development

Add and format new blog sections

Every blog section should consist of two pages: a list page and a detail page - this is necessary because post detail pages use a unique layout. To compose these sections do the following:

Create a page which will contain the blog posts list. This page can use any page template you'd like.
Create a page for the detail view and make this page a child of the first blog post list page. For this page use the page template called 2017 View Page. In the page settings - set the page to NOT show in the site navigation.
On the blog post list page - add a blog posts MVC widget and in list settings select Matrix Blog List for the list template.
In the single item settings choose the option to open the single item in an existing page - choose the "view" child page you just made.
On the view page - add a blog posts widet (NOT the MVC one). In the list settings choose Matrix - View Page Blog Posts for the list template.
In the single items settings choose the open in 'Auto-generated page' option and select 2017 matrix full post for the detail template

Create maxx events sections

add a 100% layout block and add js-check-content hidden classes to the wrapper. Label this area 'events area'
add two 100% layout blocks into the layout block from the previous step (these two should be neighbors and not nested within each other)
add a apply-hero-image class to the wrapper of the first layout block. Label this area 'events heading'
add banded-bright section-inner classes to the wrapper of the second layout block and add container js-check-me-for-content classes to the Column 1 field. Label this area 'Events widget here'
add two 100% layout blocks into the 'events heading' area. These should also be neighbors and not nested.
add hero-image hidden admin-display classes to the wrapper of the first layout block. Label this area 'drop an image widget here'
add container gutter-top--big classes to the wrapper of the second layout block and add banded padded--more classes in the Column 1 field. Label this area 'events heading'
insert a 25% / 75% layout block into the 'events heading' area. Make the first column 22% in the widths options. Add divided-columns center-inside classes to the wrapper. add a larger-text class to column 1. Label column 1 'events heading' and label column 2 'events info'

Add a content block to the 'events heading' area. The html structure should be:

<strong>Category Name</strong>
<div class="largest-text">Events</div>

Add a content block to the 'events info' area and enter a description for the events.
Add a maxx event widget to the 'Events widget here' area. In the widget options - add ~/Mvc/Views/mg-events-2017.ascx in the 'LayoutTemplatePath' option. In the 'MaxxCategoryIds' option add a taxonomy ID number if you want to filter events.

Events

These events will be so awesome. Vivamus in ornare magna. Cras dignissim lectus ullamcorper mi volutpat tincidunt. Proin at ante vestibulum, suscipit metus eget, eleifend ante.

Webinar
FMI Refresher on Member Benefits
- Monday, April 20, 2026 (4pm - 4:30pm US/Eastern)
Join us for a quick and interactive overview of these valuable offerings and meet the FMI membership team and subject matter experts from across your food industry association.

All Events

Simple events list

Add a maxx event widget on a page.
In the widget options - add ~/Mvc/Views/mg-events-2017_simple.ascx in the 'LayoutTemplatePath' option.

Exception occured while executing the controller. Check error logs for details.

Thumbnail lists

Drop in a list widget to the page, choose 'Expanded list' and select one of the list templates:

mg-thumbnail-list--2-across
mg-thumbnail-list--3-across
mg-thumbnail-list--4-across
mg-thumbnail-list--5-across		
Matrix - Title, Caption and Content
Matrix - Title and Caption
Linked Title
Sponsor Carousel

Make sure the list you select only contains an image in the content of the list items.

I'm a Link - Tagline

<hr>
<h2><a href="#">I'm a Link</a> - Tagline</h2>

Matrix - Title and Caption

Use the caption field for the items' text.

Publix
Bimbo Bakeries

Bimbo Bakeries USA is a leader in the baking industry, known for its category leading brands, innovative products, freshness and quality. As part of Grupo Bimbo, the world’s largest baking company, BBU is proud to share the company philosophy: Highly Productive and Deeply Humane in the U.S.
C&S Wholesale Grocers
Blackhawk Network
Kraft Heinz
Nestle
Albertsons Companies
Burris Logistics
Key Food Stores
H-E-B

Matrix - Title, Caption and Content

Use the caption field for the items' text.

Publix
Bimbo Bakeries

Bimbo Bakeries USA is a leader in the baking industry, known for its category leading brands, innovative products, freshness and quality. As part of Grupo Bimbo, the world’s largest baking company, BBU is proud to share the company philosophy: Highly Productive and Deeply Humane in the U.S.
C&S Wholesale Grocers
Blackhawk Network
Kraft Heinz
Nestle
Albertsons Companies
Burris Logistics
Key Food Stores
H-E-B

Events

Drag inside a container layout a grid-12 layout.
On the grid-12 add on the Column field the following class print-hide.
Drag a content block widget to add the expand all button.
Drag the Event Widget and click edit.
Select Events
on the List Tab check the No limit and Paging and on List Template select Schedule.
Click on Advance.
Click on Model
Change on ContentViewDisplayMode field the value to Automatic

Expand all button:

<p style="text-align:right;"><a class="button-secondary expand-toggle" href="#">Expand All</a></p>

Expand All

Meet leading suppliers of energy management, HVAC, refrigeration, design, construction and lighting systems. Discover potential business partners who can provide you with the resources and capabilities to remain competitive, cost-efficient and cutting-edge. Offered on two successive evenings.

Speakers:

John Lerch - Director, Energy and Facilities, Weis Markets, Inc.

Energy
Refrigeration
Store Development

Energy
Refrigeration
Store Development

Take advantage of another opportunity to meet leading suppliers of energy management, HVAC, refrigeration, design, construction and lighting systems. Discover potential business partners who can provide you with the resources and capabilities to remain competitive, cost-efficient and cutting-edge.

EPA will host the GreenChill Partnership’s annual Achievement Recognition event. GreenChill partners represent approximately 30% of U.S. supermarkets, allowing the partners to benchmark their refrigerant management performance versus each other and the industry. Join us in congratulating this year’s winners. Come learn about best-in-class refrigerant emissions rate reductions, emissions prevention in new store construction, and emissions rates for advanced refrigeration technologies.

Energy
Refrigeration
Store Development

Energy
Refrigeration
Store Development

Energy
Refrigeration
Store Development

Tours require pre-registration and fee.

We are finalizing locations. Stay tuned for more information.

Speakers

Add a Grid-12 layout inside a container.
add the class component to the column field.
Drag the Event Widget and click edit.
Content Tab: Select the event.
List Settings Tab: select No limit and paging, on Sort event we recommend "By Title (A-Z) or (Z-A)" and on the List template select Speakers.
Click the Advance button then Model button.
On the field ContentViewDisplayMode change it to "Automatic".
Click save and then save again.

John Lerch

Director, Energy and Facilities, Weis Markets, Inc.

Conference Welcome with Co-Chairs on September 22, 2020 8:00 AM

John Lerch is the Director of Energy and Facilities for Weis Markets, Inc. a regional supermarket chain based in Sunbury, PA with stores located in New York, Pennsylvania, New Jersey, Maryland, Delaware, Virginia, and West Virginia. John is responsible for the energy procurement, facility maintenance, HVAC/ Refrigeration Maintenance, equipment maintenance, and the implementation and execution of energy efficiency and sustainability programs at 200+ stores.