PreheadXL Size with Image
XL Size with Image
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus facere laborum vel earum placeat tempora dolorem doloribus.
Prehead
Posthead
Tier 3 Standard Heading
PostheadTier 3 Standard Heading
Accordion
XL Size
Accordion Title
Accordion Title
Accordion Title
Large Size, Left Aligned
Accordion Title
Accordion Title
Accordion Title
Medium Size, Center Aligned
Accordion Title
Accordion Title
Accordion Title
Alert Message
Black Alert Type:
More content can go here
Error Alert Type:
More content can go here
Info Alert Type:
More content can go here
Other Alert Type with Dismiss:
More content can go here
Success Alert Type with Dismiss:
More content can go here
Warning Alert Type with Dismiss:
More content can go here
Attention Bar
Prehead
Basic Content
PreheadH2 Heading Style (Oswald) Also Red
H2 Heading Style (Oswald) Also Red
Basic content is a module that is embedded in just about every other item. It's a basic layout that includes a Prehead, Heading, body copy, and up to two CTAs. It can be used on its own (as shown here) or within other modules (e.g. before a group of block links, cards, etc.).
The body copy element also supports a variety of text styles. Simple things like bold and italics, hyperlinks and also various heading styles as shown below.
H2 Heading Style (Roboto) Also Red
H3 Heading Style (Oswald) Also Pink
H3 Heading Style (Roboto) Also Red
H4 Heading Style Also Red
H5 Heading Style Also Red
H6 Heading Style Also Red
Small Body Copy Also Red
Disclaimer Text Also Red
- Bulleted
- and
- Red Bullet
- Bold Bullet
- Italic Bullet
- Superscript and Subscript bullet
- Numbered
- Lists
- Also
- Available
- Red Numbered
- Bold Numbered
- Italic Numbered
- Superscript and Subscript Numbered
Other text styles like bold and italic or superscript and subscript or even red text mixed with bold, italic, superscript or subscript is here. You can also add an internal link and external link and below is a document link (DMS)
Block Link Set
Block links are used as navigation items, typically to represent a group of related items (e.g. product types or features). As they are links, they will always need to link to a new page or a document.
Block links allow a variety of layouts - mimimums and maximums are shown below.
Additionally, an optional CTA can be used (typically in the event that a link to view "all" items (e.g. "View All)
Card Set
Cards are similar to block links in the sense that they are used to display a group of related items, but have a bit more flexibility including:
- Links are optional (can be used just to display content - such as product features)
- Can be used with or without an image
- Can include more copy than just a heading
- Can be used in a wider variety of layouts
- Can add a social media share banner if wanted
- Various options shown below
Full card with all available elements, 4 per row (max) and social share
Optional PreheadCard with Image
Here is brief body copy that can also be paired with a caard to convey a bit more detail on the item above.
- Rich text options
- like bullets and links also available
Optional PreheadCard with Image
Here is brief body copy that can also be paired with a caard to convey a bit more detail on the item above.
Optional PreheadCard with Image
Here is brief body copy that can also be paired with a caard to convey a bit more detail on the item above.
Optional PreheadCard with Image
Here is brief body copy that can also be paired with a caard to convey a bit more detail on the item above.
Cards with some available elements, 3 per row
Card with image - nobody copy
Can be used for some basic features
Or something simple
Cards utilizing the "Large" container size, "Left" alignment, 4 per row (desktop) and square aspect ratio
Optional PreheadCard with Image
Here is brief body copy that can also be paired with a card to convey a bit more detail about the item above.
- Rich text options
- like bullets and links also available
Optional PreheadCard with Image
Here is brief body copy that can also be paired with a card to convey a bit more detail about the item above.
Optional PreheadCard with Image
Here is brief body copy that can also be paired with a card to convey a bit more detail about the item above.
Optional PreheadCard with Image
Here is brief body copy that can also be paired with a card to convey a bit more detail about the item above.
Cards utilizing the "Medium" container size, "center" alignment, only 3 per row (desktop) and "extra wide" aspect ratio
Optional PreheadCard with Image
Here is brief body copy that can also be paired with a card to convey a bit more detail about the item above.
- Rich text options
- like bullets and links also available
Optional PreheadCard with Image
Here is brief body copy that can also be paired with a card to convey a bit more detail about the item above.
Optional PreheadCard with Image
Here is brief body copy that can also be paired with a card to convey a bit more detail about the item above.
Optional PreheadCard with Image
Here is brief body copy that can also be paired with a card to convey a bit more detail about the item above.
Optional PreheadCard with Image
Here is brief body copy that can also be paired with a card to convey a bit more detail about the item above.
Category Feature
The category feature needs to utilize a data set for this to be able to show its full potential. Until there is a published, usable Paroc data set, this will show blank. Please see module documentation for further information on the Category Feature.
Contact Us
The contact us module allows you to either input pre-defined contact details (label, body copy, phone, email, and/or form) or create custom.
The contact us module is typically only used at the bottom of the page (ahead of the footer)
Contact Us
Even though we’re a global company, we’re always ready to answer your questions. Call to speak with an Owens Corning representative.
Content & Image
The content and image module contains fields for content (the basic content construct, as indicated above - with headings, body and CTAs) and space for some sort of media (image or video). Module has a variety of different layouts that affect size and position of image/copy.
Optional PreheadContent & Image:
XL Size,
1/3 Text, 2/3 Media
Content & Image:
XL Size,
1/3 Text, 2/3 Media
This is the body copy. Typically, we use this section to help reinforce whatever the image is showing - be it a product, feature or service. Content & Image modules are used all over the website. In all of these, the image sizes are directional. Images will always scale to fit the width of the container, but can be taller or shorter than what is currently displayed.
Optional PreheadContent & Image:
XL Size,
1/3 Text, 2/3 Media
Content & Image:
XL Size,
1/3 Text, 2/3 Media
This is the body copy. Typically, we use this section to help reinforce whatever the image is showing - be it a product, feature or service. Content & Image modules are used all over the website. In all of these, the image sizes are directional. Images will always scale to fit the width of the container, but can be taller or shorter than what is currently displayed.
Optional PreheadContent & Image:
XL Size, Video,
1/3 Text, 2/3 Media
Content & Image:
XL Size, Video,
1/3 Text, 2/3 Media
This is the body copy. Typically, we use this section to help reinforce whatever the image is showing - be it a product, feature or service. Content & Image modules are used all over the website. In all of these, the image sizes are directional. Images will always scale to fit the width of the container, but can be taller or shorter than what is currently displayed.
Warning: This video contains flashing images that could trigger seizures for people with photo sensitivity.
Optional PreheadContent & Image:
XL Size,
1/2 Text, 1/2 Media
Content & Image:
XL Size,
1/2 Text, 1/2 Media
This is the body copy. Typically, we use this section to help reinforce whatever the image is showing - be it a product, feature or service. Content & Image modules are used all over the website. In all of these, the image sizes are directional. Images will always scale to fit the width of the container, but can be taller or shorter than what is currently displayed.
Optional PreheadContent & Image:
XL Size,
2/3Text, 1/3 Media
Content & Image:
XL Size,
2/3Text, 1/3 Media
This is the body copy. Typically, we use this section to help reinforce whatever the image is showing - be it a product, feature or service. Content & Image modules are used all over the website. In all of these, the image sizes are directional. Images will always scale to fit the width of the container, but can be taller or shorter than what is currently displayed.
Optional PreheadContent & Image:
Large Size, Left Aligned,
1/3 Text, 2/3 Media
Content & Image:
Large Size, Left Aligned,
1/3 Text, 2/3 Media
This is the body copy. Typically, we use this section to help reinforce whatever the image is showing - be it a product, feature or service. Content & Image modules are used all over the website. In all of these, the image sizes are directional. Images will always scale to fit the width of the container, but can be taller or shorter than what is currently displayed.
Optional PreheadContent & Image:
Medium Size, Center Aligned,
1/2 Text, 1/2 Media
Content & Image:
Medium Size, Center Aligned,
1/2 Text, 1/2 Media
This is the body copy. Typically, we use this section to help reinforce whatever the image is showing - be it a product, feature or service. Content & Image modules are used all over the website. In all of these, the image sizes are directional. Images will always scale to fit the width of the container, but can be taller or shorter than what is currently displayed.
Featured List
Typically used to show a list of items (2-4 is recommended) and one featured item. This is frequently used to showcase a series of featured products related to a given topic.
Often times, the featured list is paired with the optional gray "section background" as shown below.
Heading for Featured List Section
Optional PreheadFeatured Card Goes Here
This is the "featured" part of a featured list - allowing you to showcase a few items and then have one "featured" item over on the right.
Featured List with Gray Background
Optional PreheadFeatured Card Goes Here
This is the "featured" part of a featured list - allowing you to showcase a few items and then have one "featured" item over on the right.
Figure
The Figure module is essentially a simple image module where we have a single image that spans an entire "row" of the page (e.g. no side by side images)
Full Bleed Figure: Optional caption goes here either for attribution or to describe something from the oimage above.
XL Size Figure: Optional caption goes here either for attribution or to describe something from the oimage above.
Large Size Figure: Optional caption goes here either for attribution or to describe something from the oimage above.
Warning: This video contains flashing images that could trigger seizures for people with photo sensitivity.
Medium Size Figure with Video: Optional caption goes here either for attribution or to describe something from the oimage above.
Small Size Figure: Optional caption goes here either for attribution or to describe something from the oimage above.
Thumbnail igure: Optional caption goes here either for attribution or to describe something from the oimage above.
Full Bleed
Test Callout TextTest Callout Text
Disclaimer text can go here
Test Callout TextTest Callout Text
Disclaimer text can go here
Test Callout TextTest Callout Text
Disclaimer text can go here
PreheadHeading
Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus facere laborum vel earum placeat tempora dolorem doloribus.
PreheadHeading
Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus facere laborum vel earum placeat tempora dolorem doloribus.
Gallery
Gallery with Small Thumbnail
Thumbnail Name Here
Thumbnail Name Here
Thumbnail Name Here
Thumbnail Name Here
Thumbnail Name Here
Thumbnail Name Here
Thumbnail Name Here
Thumbnail Name Here
Thumbnail Name Here
Gallery with Large Thumbnail
Thumbnail Name Here
Thumbnail Name Here
Thumbnail Name Here
Thumbnail Name Here
Thumbnail Name Here
Thumbnail Name Here
Thumbnail Name Here
Thumbnail Name Here
iFrame
Media Objects
Media Objects
Media objects are intended to be used to display a group of related content. Typically, this is used for things like features & benefits (with icons) or a couple of products. Media objects can just be static (not clickable) or be linked to more content.
Default image size media objects - 3 per row
Default image size media objects - 2 per row
Large image size media objects - 3 per row
Large image size media objects - 2 per row
XL image size media objects - 2 per row - Centered
XL image size media objects - 1 per row - with dividers
Icons media objects - 4 per row
Module Set
Module Set
Module set allows you to take two modules and place them side by side in two columns. This can be any combination of modules available. There is only one example below but it can include many different combinations.
PreheadHeading
Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus facere laborum vel earum placeat tempora dolorem doloribus.
Accordion Title
Accordion Title
Accordion Title
Accordion Title
Accordion Title
News
News
The news module, currently only used on the home page and the sustainability page, is used to link up to 3 of the most recent news articles. No images, just category, heading, synopsis and link to article.
Recent News
Optional Prehead
News Item 1 this is the heading and what it looks like
Here is some detail about the news item - a short synopsis if you will about what the article is all about.
Optional Prehead
News Item 2 this is the heading and what it looks like
Here is some detail about the news item - a short synopsis if you will about what the article is all about.
Optional Prehead
News Item 3 this is the heading and what it looks like
Here is some detail about the news item - a short synopsis if you will about what the article is all about.
Tabbed Content
Tabbed Content
The tabbed content module allows you to create a multitude of tabs that can have their own modules within each. This allows for more information to be placed on the page while living behind tabs instead of elongating the page.
Icon Tab, Left Aligned
- Tab Label
- Tab Label
- Tab Label
PreheadHeading
Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus facere laborum vel earum placeat tempora dolorem doloribus.
PreheadHeading
Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus facere laborum vel earum placeat tempora dolorem doloribus.
Image Tab, Left Aligned
Tab Label
PreheadHeading
Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus facere laborum vel earum placeat tempora dolorem doloribus.
PreheadHeading
Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus facere laborum vel earum placeat tempora dolorem doloribus.
Text Only, Center Aligned
- Tab Label
- Tab Label
- Tab Label
PreheadHeading
Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus facere laborum vel earum placeat tempora dolorem doloribus.
PreheadHeading
Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus facere laborum vel earum placeat tempora dolorem doloribus.
Text Only, Right Aligned
- Tab Label
- Tab Label
- Tab Label
PreheadHeading
Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus facere laborum vel earum placeat tempora dolorem doloribus.
PreheadHeading
Heading
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus facere laborum vel earum placeat tempora dolorem doloribus.
Table
Table
XL Size, Left Aligned
| Head One | Head Two | Head Three | Head Four | Head Five |
|---|---|---|---|---|
| 1 one | 1 two | 1 three | 1 four | 1 five |
| 2 one | 2 two | 2 three | 2 four | 2 five |
| 3 one | 3 two | 3 three | 3 four | 3 five |
| 4 one | 4 two | 4 three | 4 four | 4 five |
| 5 one | 5 two | 5 three | 5 four | 5 five |
Large Size, Left Aligned
| Head One | Head Two | Head Three | Head Four | Head Five |
|---|---|---|---|---|
| 1 one | 1 two | 1 three | 1 four | 1 five |
| 2 one | 2 two | 2 three | 2 four | 2 five |
| 3 one | 3 two | 3 three | 3 four | 3 five |
| 4 one | 4 two | 4 three | 4 four | 4 five |
| 5 one | 5 two | 5 three | 5 four | 5 five |
Medium Size, Center Aligned
| Head One | Head Two | Head Three | Head Four | Head Five |
|---|---|---|---|---|
| 1 one | 1 two | 1 three | 1 four | 1 five |
| 2 one | 2 two | 2 three | 2 four | 2 five |
| 3 one | 3 two | 3 three | 3 four | 3 five |
| 4 one | 4 two | 4 three | 4 four | 4 five |
| 5 one | 5 two | 5 three | 5 four | 5 five |