Above The Fold
ABF Layout #1
Company Name

Above The Fold Heading Will Go Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Button TextButton Text
Link to Landing Page
Link to Landing Page
Link to Landing Page
Link to Landing Page
Above The Fold
ABF Layout #2
Preheading

Above The Fold Heading Will Go Here

Link to a product or service landing page
Link to a product or service landing page
Link to a product or service landing page
Button TextButton Text
Above The Fold
ABF Layout #3
Preheading

Above The Fold Heading Will Go Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Button TextButton Text
Featured Service / Product
Learn More »
Featured Service / Product
Learn More »
Featured Service / Product
Learn More »
Featured Service / Product
Learn More »
Page Content
Text Left – Image Right
Preheading

Heading Goes Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button TextButton Text
Page Content
Image Left – Text Right
Preheading

Heading Goes Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button TextButton Text
Preheading

Above The Fold Heading Will Go Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.
Button TextButton Text
Link to Landing Page
Link to Landing Page
Link to Landing Page
Link to Landing Page
Landing Page
Internal Page
Essentials
Breadcrumb Menu
Landing Page
Internal Page
Page Content
Simple Content Section

Section Heading

Button Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Page Content
Content Section with Buttons

Section Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Button Text
Button TextButton TextButton TextButton TextButton Text
Page Content
Content Section with Link Blocks
Preheading

Section Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Button TextButton Text
Page Content
Content Section with Blurbs

Section Heading Goes Here

Button Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Blurb Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Text Link »
Blurb Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Text Link »
Blurb Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Text Link »
Blurb Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Text Link »
Page Content
Blurbs
Preheading

Section Heading Goes Here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Blurb Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Text Link »
Blurb Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Text Link »
Blurb Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

Text Link »
Page Content
Cards – Big

Section Heading Goes Here

Subheading Text Goes Here
Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button Text
Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button Text
Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button Text
Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button Text
Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button Text
Card Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button Text
Essentials
Quick Links
Preheading

Section Heading Goes Here

Subheading Text Will Go In This Space
Quick Link
Quick Link
Quick Link
Quick Link
Quick Link
Quick Link
Page Content
Overview – Links

Section Heading Goes Here

Button Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Page Content
Callout
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button Text
Essentials
Contact Section
Preheading

Contact Us

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

555.555.5555
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading
Note: If changing core styles for heading, paragraphs, etc., you must make changes at the top-level inherited tag.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Note: No core text elements (headings, paragraphs, etc.) should have any margin. Most text is placed within cells or containers that utilizes flex layouts with gaps that account for margins. All default top & bottom margins have been removed from headings & paragraphs.
Buttons
Note: Buttons should always be placed inside button containers. The div the buttons sit in include a top-margin and are formatted to hold multiple buttons that will drop to a 2nd line if too big on smaller screens.
Button Text
Button TextButton Text
Lists
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  1. This is some text inside of a div block.
  2. This is some text inside of a div block.
  3. This is some text inside of a div block.
Spacers
Note: Spacers are to be used between elements. The class dictates the size of the gap. The spacers only styles are an applied 'height' and 100% width. The example below has them sitting in a black container—otherwise they would be invisible.
Font Sizes
12px
14px
16px
18px
24px
36px
48px
72px
Line Height
100%
125%
150%
175%
Section Padding
100px
140px
Quick Stack Gaps
10px
20px
50px
80px
100px
Button Padding
16px
32px
Cell Variants
cell-v-l-20-top
cell-v-r-20-top
cell-v-l-20-center
cell-v-r-20-center
cell-v-l-20-spread
cell-v-r-20-spread
cell-v-l-10-center
cell-v-r-10-center
cell-v-c-20-top
cell-h-r-20-center
cell-h-l-20-center
cell-h-c-10-center
Note: Cells should follow the following format cell-[VERTICAL (v) or HORIZONTAL (h)]-[(The X-AXIS) LEFT (l), CENTER (C), or RIGHT (r)]-[GAP SPACING]-[Y-AXIS (spread, top, center, bottom)]

Format below:
cell-[v|h]-[l|c|r]-[gap]-[y-axis]
Quick Stacks
Note: To change default values, edit in 'Variables' panel
qs-0
qs-xs
default 10px
qs-s
default 20px
qs-m
default 50px
qs-l
default 80px
qs-xl
default 100px
The Casting MFG Association
Copyright ©2026 Company
Privacy Policy
Terms
This is some text inside of a div block.

Heading

This is some text inside of a div block.