Content App | Web Components Guide
Core Components
Basic content encompasses things like two-column layouts, text-based elements, promotional banners, and hover content lists. Think of these as the basic building blocks of a standard web page.
The homepage market section (currently only in use on localized language pages) is a banner-style component with a title, description, CTA section, image, and unique background color.
The "Title Over Image" component is Hero-style component with a title, large image with lightbox, description, and CTA.
The "Hover Content List" is an interactive image-based section where users can mouse-over an image to reveal a related description and CTA.
These sections can comfortably display between one and four of these interactive modules in a row.
The "Promotional Banner" is a banner-style section with a title, description, image, CTA, and left-to-right gradient background.
These sections are highly customizable. Content editors will be expected to follow branding for their related business unit.
The "Wireframe Gradient" is another banner-style section with a title, description, image, and CTA. These modules also feature a wireframe graphic and divider between description and CTA.
Below are different variations of available text-based layouts. These basic text modules will usually have a title, description, and optional CTA. The second set of layouts also contain an area for a graphic.
Because the description section uses a WYSIWYG editor (What-you-see-is-what-you-get), HTML can be applied directly to create a wide array of web structures. Graphics can also be inserted into the description field, but will have less funcitonality than using dedicated image fields.
Hero Banners are the screen-wide banners you see at the top of most web pages. These have multiple variations and styles to suit the needs of a given page or set of pages.
Hero Banners have a bug at the moment where every banner on the page will use the background image of the last banner on the page. This is avoidable by limiting to one banner per page, or by using the promotional or wireframe gradient banners (see Basic Content) in place of a second hero-style banner.
The Centered Gradient (Hero Banner) is a banner-style component with a centered title, description, and CTA section. This banner has a static blue to light-blue gradient background.
The Homepage Hero is a large banner-style component with a title, CTA section, and background image. Text can toggle between light and dark mode. The CTA section allows up to Three CTAs to be included: primary, secondary, and tertiary.
The Short Banner with Overlay is a thin banner-style component with a title, CTA section, and background image.
This banner's variations inlcude the option to toggle light and dark mode text, a semi-transparent overlay with a blur and selectable colors, and a wireframe graphic that can be toggled on or off.
The Subpage Hero Banner is a simple banner-style component with a title, description, CTA section, and background image. This is the most commonly used banner across pages on cpcworldwide.
A frequently used separator for visually organizing high-level sections of pages. Span the entire width of their container.
A message to users in the layout of a letter.
Multiple Signatures available for selection. Be aware of the container background color, as the signatures have a static white background. Copy is implemented the same as a basic text component's description.