Color Palette
#2a8738
$sea-green
#81c341
$sushi
#c4d82d
$key-lime
#ffda00
$yellow
#00a6c9
$blue
#04b59f
$persian-green
#7f58a5
$purple
#f57f29
$orange
#ed1944
$red
#ffffff
$white
#f7f7f7
$alabaster
#eeeeee
$timberwolf
#bfbfbf
$silver
#333333
$mine-shaft
#000000
$black
#794f17
$mud
Typography Standards
- Page Head
@include header-page; - Promo Head
@include header-promo; - Section Head
@include header-section; - Promo Subhead
@include header-promo-sub; - Search Results Title
@include header-results-title; - Product Card Price / Page Subhead
@include header-page-sub; - Search Result Item Category
@include header-sub-description; - Product Card Save
@include header-card-save; - Product Card Title
@include header-card-title; At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
Use <p> tag or @include paragraph;- At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et.
Use <small> tag or @include small;
Type Mixins
@include font-regular()
@include font-regular-italic()
@include font-medium()
@include font-medium-italic()
@include font-semibold()
@include font-semibold-italic()
@include font-bold()
@include font-monotype()
@include font-bold() //only outputs family name and weight
@include font-bold(15px) //outputs with size
@include font-bold(15px, 2.5) //outputs with size and line-height
RichText
This is an H1
this is an H2
This is an h3
This is a paragraph Come on our and enjoy these seasonal hatched chili's for a limited time only and this is a link!
And an image
Icon Fonts
use class name <span class="icon-fm_info">
or use mixin
.my-thing {
&:before {
@include icon($icon-fm_info, 20px);
}
}
Accordion
Accordions are rendered - using Accessible Accordion component for React
Default behavior on accordions is to fade in and out. For custom animations / transitions (using max-height) override the styles at a component level.
Custom behaviors can be added to the onAccordionChange ( ) method
Item $1
Item $2
Item $3
Item $4
Item $5
Slide Image Title
Slide Image Title
Slide Image Title
Slide Image Title
Slide Image Title
Grid
The project uses Burbon Neat. Each view, mobile, tablet and desktop use a 12 column layout. Use semantic class names when possible.
//Example of Burbon Neat
.my-elm {
@include media($tablet) {
@include span-columns(8 of 12);
}
@include media($desktop) {
@include span-columns(4 of 12);
}
}
Grid Helpers for Forms
These examples are mainly used on form pages where layout based class names are simpler.
//Classes
.fm-cell//Classes
.fm-cell
.fm-cell--t-2//Classes
.fm-cell
.fm-cell--t-2
.fm-cell--t-end
.fm-cell--d-4//Classes
.fm-cell
.fm-cell--d-4
.fm-cell--d-end//All Grid Classes
.fm-cell //default, 100%
.fm-cell--t-2 //override in tablet, 50% wide
.fm-cell--d-2 //override in desktop, 50% wide
.fm-cell--d-4 //override in desktop, 25% wide
.fm-cell--t-end //this ends a row in tablet
.fm-cell--d-end //this ends a row in desktop
.fm-cell--no-label //use in a form, puts space for a label when in tablet and above
CTAs
this is an error message
Grid Cards
Chef Story
1. Dark, 2x2, Cut-off, Image Overwrite
Olive Oil Highlight, but with a title much longer than it probably should be
2: Dark, 2x1, Full Bleed, Image Overwrite, and with a description much longer than it should be
Italian Month
3: Dark, 2x1, Full Bleed, Image default: no hero image
Product Highlight
4: Dark, 2x1, Full Bleed, Image from item hero
The Fresh Pick
5: Dark, 2x2, Full Bleed, Image from item hero
Produce Story
6: Dark, 2x1, Full Bleed, Image from item hero
Chef Story
7. Light, 2x2, Cut-off, Image overwrite
Olive Oil Highlight, but with a title much longer than it probably should be
8: Dark, 2x1, Cut-off, Image overwrite, and with a description much longer than it should be
Italian Month
9: Dark, 2x1, Full Bleed, Image default: no hero image
Product Highlight
10: Light, 2x1, Cut-off, Image from item hero
The Fresh Pick
11: Light, 2x2, Cut-off, Image from item hero
Produce Story
12: Light, 2x1, Cut-off, Image from item hero
Product Cards
Special Item Name
Subtitle
$9.99
Special Item Name
Subtitle
$9.99
Special Item Name
Subtitle
$9.99
Special Item Name
Subtitle
$9.99
Special Item Name
Subtitle
$9.99
Special Item Name
Subtitle
$9.99
Special Item Name
Subtitle
$9.99
Special Item Name
Subtitle
$9.99
Special Item Name
Subtitle
$9.99
Special Item Name
Subtitle
$9.99
Promo Cards
Special One Day Event
Customize Your cuts of Premium New York Strip February 25th 2pm - 6pm
- Very juicy and flavorful with a tangy sweetness you"ll like
- Juices well for beverages and dressings
- Seedless and easy to peel, a great snack on the go
Stock Up Weekend Sale
Astoria Wines, MARCH 3rd - 4th
Stock Up Weekend Sale
Astoria Wines, MARCH 3rd - 4th
Wine Tasting Event Headline
Location, time and day
Stock Up Weekend Sale
Astoria Wines, MARCH 3rd - 4th
Stock Up Weekend Sale
Astoria Wines, MARCH 3rd - 4th
Stock Up Weekend Sale
Astoria Wines, MARCH 3rd - 4th
Little Big Meal cards (LBM)
Light Theme Headline
A full meal you can cook in under and hour. Feeds 4.
$40
Save $5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet metus libero. Nam sit amet elit at lectus pulvinar consectetur faucibus et orci.
- CHOOSE ONE: Extra Lean Ground Sirloin (16 oz.), Ground Turkey (16 oz.), White Meat Ground Turkey (16 oz.), OR Chicken Breast Strips (16 oz.)
- CHOOSE ONE: The Fresh Market Tortilla Chips (Blue Organic, White Organic, Yellow Organic)
- GET ONE: Riega Organic Taco Seasoning
Light Theme Headline
A full meal you can cook in under and hour. Feeds 4.
$40
Save $5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet metus libero. Nam sit amet elit at lectus pulvinar consectetur faucibus et orci.
- CHOOSE ONE: Extra Lean Ground Sirloin (16 oz.), Ground Turkey (16 oz.), White Meat Ground Turkey (16 oz.), OR Chicken Breast Strips (16 oz.)
- CHOOSE ONE: The Fresh Market Tortilla Chips (Blue Organic, White Organic, Yellow Organic)
- GET ONE: Riega Organic Taco Seasoning
Without Description Headline
An LBM card with no description passed in
$40
Save $5
- CHOOSE ONE: Extra Lean Ground Sirloin (16 oz.), Ground Turkey (16 oz.), White Meat Ground Turkey (16 oz.), OR Chicken Breast Strips (16 oz.)
- CHOOSE ONE: The Fresh Market Tortilla Chips (Blue Organic, White Organic, Yellow Organic)
- GET ONE: Riega Organic Taco Seasoning
Without Ingredients Headline
An LBM card with no ingredients passed in
$40
Save $5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet metus libero. Nam sit amet elit at lectus pulvinar consectetur faucibus et orci.
Without Pricing Headline
An LBM card with no pricing passed in
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet metus libero. Nam sit amet elit at lectus pulvinar consectetur faucibus et orci.
- CHOOSE ONE: Extra Lean Ground Sirloin (16 oz.), Ground Turkey (16 oz.), White Meat Ground Turkey (16 oz.), OR Chicken Breast Strips (16 oz.)
- CHOOSE ONE: The Fresh Market Tortilla Chips (Blue Organic, White Organic, Yellow Organic)
- GET ONE: Riega Organic Taco Seasoning
- CHOOSE ONE: Daisy Brand Sour Cream (Regular, Light)
- CHOOSE ONE: The Fresh Market Shredded Cheese (Mexican Mix, Cheddar, Reduced Fat)
Without CTA Headline
An LBM card with no CTA passed in
$40
Save $5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet metus libero. Nam sit amet elit at lectus pulvinar consectetur faucibus et orci.
- CHOOSE ONE: Extra Lean Ground Sirloin (16 oz.), Ground Turkey (16 oz.), White Meat Ground Turkey (16 oz.), OR Chicken Breast Strips (16 oz.)
- CHOOSE ONE: The Fresh Market Tortilla Chips (Blue Organic, White Organic, Yellow Organic)
Without Pricing, Without CTA Headline
An LBM card with no pricing or CTA passed in
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet metus libero. Nam sit amet elit at lectus pulvinar consectetur faucibus et orci.
- CHOOSE ONE: Extra Lean Ground Sirloin (16 oz.), Ground Turkey (16 oz.), White Meat Ground Turkey (16 oz.), OR Chicken Breast Strips (16 oz.)
- CHOOSE ONE: The Fresh Market Tortilla Chips (Blue Organic, White Organic, Yellow Organic)
- GET ONE: Riega Organic Taco Seasoning
- CHOOSE ONE: Daisy Brand Sour Cream (Regular, Light)
Without Dates Headline
An LBM card with no dates passed in
$40
Save $5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet metus libero. Nam sit amet elit at lectus pulvinar consectetur faucibus et orci.
- CHOOSE ONE: Extra Lean Ground Sirloin (16 oz.), Ground Turkey (16 oz.), White Meat Ground Turkey (16 oz.), OR Chicken Breast Strips (16 oz.)
- CHOOSE ONE: The Fresh Market Tortilla Chips (Blue Organic, White Organic, Yellow Organic)
- GET ONE: Riega Organic Taco Seasoning
Maxiumum Card Headline
An LBM card with the maximum data displayed
$40
Save $5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet metus libero. Nam sit amet elit at lectus pulvinar consectetur faucibus et orci.
- CHOOSE ONE: Extra Lean Ground Sirloin (16 oz.), Ground Turkey (16 oz.), White Meat Ground Turkey (16 oz.), OR Chicken Breast Strips (16 oz.)
- CHOOSE ONE: The Fresh Market Tortilla Chips (Blue Organic, White Organic, Yellow Organic)
- GET ONE: Riega Organic Taco Seasoning
- CHOOSE ONE: Daisy Brand Sour Cream (Regular, Light)
- CHOOSE ONE: The Fresh Market Shredded Cheese (Mexican Mix, Cheddar, Reduced Fat)
- CHOOSE ONE: Salsa Sunset (Black Bean, Bruchetta, Hot, Mango, Medium, Mild)
- GET ONE: Black Bean and Roasted Corn (16 oz.)
Minimum Card Headline
An LBM card with the minimum data displayed
This One is Only Touts
I am a toute and I only have a title
I am a toute and I only have a title
Touts Only - 2 Item Variation
I am a toute and I only have a title
I am a toute and I only have a title
Touts Only - 4 Item Variation
I am a toute and I only have a title
I am a toute and I only have a title
I am a toute and I only have a title
I am a toute and I only have a title
Two Column Horizontal (Title + CTA)
Three Column Horizontal (Title + CTA)
Four Column Horizontal (Title + CTA)
Two Column Horizontal (Title + Description)
Three Column Horizontal (Title + Description)
Four Column Horizontal (Title + Description)
Two Column Horizontal (CTA Only)
Three Column Horizontal (CTA Only)
Four Column Horizontal (CTA Only)
Two Column Horizontal (Recipe)
Three Column Horizontal (Recipe)
Four Column Horizontal (Recipe)
Recommendations
Recent Stories
Recent Recipes
Banners
Form Elements
Image Module
Shopping Basket Item
Loaders
Free Form Page - Author Module
Free Form Page- Text and Rich Media
Test CaptionOne-half Ratio - Image and CTA (Dark theme, Right Orientation)
"During the process of extracting (vegetable) oil, the fatty acids are exposed to more heat than they should be and begin to degrade," Shanahan said. "Then, during refining steps called bleaching and deodorizing, the degradation really takes off."
Shanahan, author of the book Deep Nutrition: Why Your Genes Need Traditional Food, said vegetable oils have more polyunsaturated fats than monounsaturated fats, something that makes them more susceptible to heat than olive oil. When exposed to high temperatures, nutrients such as Omega-3 are lost from the oil, according to Shanahan.
"If someone switches to extra virgin olive oil, you'll see all kinds of benefits," Shanahan said. "Their bad cholesterol will go down, blood pressure will drop and even heartburn can get better."
One-half Ratio - Video (Light theme, Left Orientation)
"During the process of extracting (vegetable) oil, the fatty acids are exposed to more heat than they should be and begin to degrade," Shanahan said. "Then, during refining steps called bleaching and deodorizing, the degradation really takes off."
Shanahan, author of the book Deep Nutrition: Why Your Genes Need Traditional Food, said vegetable oils have more polyunsaturated fats than monounsaturated fats, something that makes them more susceptible to heat than olive oil. When exposed to high temperatures, nutrients such as Omega-3 are lost from the oil, according to Shanahan.
"If someone switches to extra virgin olive oil, you'll see all kinds of benefits," Shanahan said. "Their bad cholesterol will go down, blood pressure will drop and even heartburn can get better."
Test CaptionOne-third Ratio - Image (Light theme, Left Orientation)
"During the process of extracting (vegetable) oil, the fatty acids are exposed to more heat than they should be and begin to degrade," Shanahan said. "Then, during refining steps called bleaching and deodorizing, the degradation really takes off."
Shanahan, author of the book Deep Nutrition: Why Your Genes Need Traditional Food, said vegetable oils have more polyunsaturated fats than monounsaturated fats, something that makes them more susceptible to heat than olive oil. When exposed to high temperatures, nutrients such as Omega-3 are lost from the oil, according to Shanahan.
"If someone switches to extra virgin olive oil, you'll see all kinds of benefits," Shanahan said. "Their bad cholesterol will go down, blood pressure will drop and even heartburn can get better."
One-fourth Ratio - Video (Dark theme, Left Orientation)
"During the process of extracting (vegetable) oil, the fatty acids are exposed to more heat than they should be and begin to degrade," Shanahan said. "Then, during refining steps called bleaching and deodorizing, the degradation really takes off."
Shanahan, author of the book Deep Nutrition: Why Your Genes Need Traditional Food, said vegetable oils have more polyunsaturated fats than monounsaturated fats, something that makes them more susceptible to heat than olive oil. When exposed to high temperatures, nutrients such as Omega-3 are lost from the oil, according to Shanahan.
"If someone switches to extra virgin olive oil, you'll see all kinds of benefits," Shanahan said. "Their bad cholesterol will go down, blood pressure will drop and even heartburn can get better."
Test CaptionOne-fourth Ratio - Image and CTA (Light theme, Right Orientation)
"During the process of extracting (vegetable) oil, the fatty acids are exposed to more heat than they should be and begin to degrade," Shanahan said. "Then, during refining steps called bleaching and deodorizing, the degradation really takes off."
Shanahan, author of the book Deep Nutrition: Why Your Genes Need Traditional Food, said vegetable oils have more polyunsaturated fats than monounsaturated fats, something that makes them more susceptible to heat than olive oil. When exposed to high temperatures, nutrients such as Omega-3 are lost from the oil, according to Shanahan.
"If someone switches to extra virgin olive oil, you'll see all kinds of benefits," Shanahan said. "Their bad cholesterol will go down, blood pressure will drop and even heartburn can get better."
One-half Ratio - Video and CTA (Dark theme, Right Orientation)
"During the process of extracting (vegetable) oil, the fatty acids are exposed to more heat than they should be and begin to degrade," Shanahan said. "Then, during refining steps called bleaching and deodorizing, the degradation really takes off."
Shanahan, author of the book Deep Nutrition: Why Your Genes Need Traditional Food, said vegetable oils have more polyunsaturated fats than monounsaturated fats, something that makes them more susceptible to heat than olive oil. When exposed to high temperatures, nutrients such as Omega-3 are lost from the oil, according to Shanahan.
"If someone switches to extra virgin olive oil, you'll see all kinds of benefits," Shanahan said. "Their bad cholesterol will go down, blood pressure will drop and even heartburn can get better."
Free Form page - Accordion Module
- Alexia French Fries
- Almonds
- Apple Crisp Pie
- This is a very long list item that I am testing in the accordion module
- Bar Harbor Soup
- Bays English Muffins
- Blood Oranges
- Brazil Nuts
- Café L'Orange
- This is another long text item that needs testing in this accordion module
- Clementines
- De Cecco Pasta
- De Wafelbakkers Frozen Pancakes
- Fresh Fruit Platter
- Granny Smith Apples
Free Form Page - Modules with Background Themes (Light and Dark)
Text and Rich-Media Entity (Dark Theme)
"During the process of extracting (vegetable) oil, the fatty acids are exposed to more heat than they should be and begin to degrade," Shanahan said. "Then, during refining steps called bleaching and deodorizing, the degradation really takes off."
Shanahan, author of the book Deep Nutrition: Why Your Genes Need Traditional Food, said vegetable oils have more polyunsaturated fats than monounsaturated fats, something that makes them more susceptible to heat than olive oil. When exposed to high temperatures, nutrients such as Omega-3 are lost from the oil, according to Shanahan.
"If someone switches to extra virgin olive oil, you'll see all kinds of benefits," Shanahan said. "Their bad cholesterol will go down, blood pressure will drop and even heartburn can get better."
Text Item Entity (Light Theme)
In November 2004, the FDA concluded that there was enough evidence of the health benefits of olive oil to officially endorse claims that doctors and nutritionists have been making for years. They released a statement that said "limited and not conclusive evidence" suggests that 2 tablespoons of olive oil per day might reduce the risk of coronary heart disease. The oil should be substituted for saturated fats you might be consuming, and it should not increase your daily caloric intake. Not a ringing endorsement, but one just the same.
Test CaptionText and Rich-Media Entity (Light Theme)
"During the process of extracting (vegetable) oil, the fatty acids are exposed to more heat than they should be and begin to degrade," Shanahan said. "Then, during refining steps called bleaching and deodorizing, the degradation really takes off."
Shanahan, author of the book Deep Nutrition: Why Your Genes Need Traditional Food, said vegetable oils have more polyunsaturated fats than monounsaturated fats, something that makes them more susceptible to heat than olive oil. When exposed to high temperatures, nutrients such as Omega-3 are lost from the oil, according to Shanahan.
"If someone switches to extra virgin olive oil, you'll see all kinds of benefits," Shanahan said. "Their bad cholesterol will go down, blood pressure will drop and even heartburn can get better."
Text Item Entity (Light Theme)
In November 2004, the FDA concluded that there was enough evidence of the health benefits of olive oil to officially endorse claims that doctors and nutritionists have been making for years. They released a statement that said "limited and not conclusive evidence" suggests that 2 tablespoons of olive oil per day might reduce the risk of coronary heart disease. The oil should be substituted for saturated fats you might be consuming, and it should not increase your daily caloric intake. Not a ringing endorsement, but one just the same.
Rich Text Editing - Vertical Tout List
1Power Plates
Tout Item without CTA
Example
More
More
Paragraph Breaks
2Power Plates
Tout Item with CTA
Testing Bold text with paragraph breaks and a italicized header text.
Testing Italics text with paragraph breaks and a bold header text.
Testing paragraph breaks and multiple lines of text.
Rich Text Editing - Steps List
1Add Aromatics
Strip leaves from oregano stems and roughly chop. Add oregano and 1 tablespoon garlic (more if you like) to pan. Cook additional 3-5 minutes or until garlic is fragrant but not burning.
Needs Bold
And paragraph breaks
2Add Sauce
Pour the pasta sauce into the saute pan with browned meat.
Pour the pasta sauce into the saute pan with browned meat. - Italics with Bold
Needs Italics
And paragraph breaks