Full Width Text
The full width text component is the foundation of the main content area of many pages. Spanning the full main content area within a given template, it houses basic text content that follows our typographic hierarchy with the option to add pull quotes, images, inset information, and tables in-line.
More information about the Full Width Text component can be found at:
http://cfpb.github.io/design-manual/page-components/fullwidth-text.html
and
https://cfpb.github.io/capital-framework/components/cf-layout/#custom-content-layouts
Content
WHEN TO USE
- When there are multiple paragraphs of text to be shown on a page. Especially if multiple sections are involved.
- When text content is the main focus of a page.
WHEN SOMETHING ELSE IS BETTER
- When the goal of the text is to quickly inform users about a set of options and/or drive them to child pages other sections of the site. Consider using an Info Unit Group. WHERE TO USE
- Landing pages
- Sublanding pages
- Browse pages
- Filterable pages
- Learn pages
- Document detail pages
HTML code snippet
Image
WHEN TO USE
- When an image is needed in the context of a passage of text
WHEN SOMETHING ELSE IS BETTER
- When multiple columns or a grid of images are needed. Consider the Info Unit Group module.
WHERE TO USE
HTML code snippet
Inset content
WHEN TO USE
- When ancillary information is needed in context of flowing text, such as quotes, call to action, related links, etc. Only add related links within page text when the links are directly related to and referenced in a specific part of the text. Generally related links should go in the sidebar.
- May be used in any full width text component, but recommended only for Learn pages.
WHEN SOMETHING ELSE IS BETTER
- May be used in any full width text component, but recommended only for Learn pages. WHERE TO USE
- Learn pages
- Document detail pages
Content guidelines
Content and image elements that are full width at desktop size remain full width across all breakpoints. Heading, link, and buttons all follow responsive patterns.
Sidebar 901+ px
Sidebar less than 600 px
Inset
All variations of inset elements move into full width format at screen widths less than 600px as seen below.
Sidebar 601+ px
Sidebar less than 600 px
Content guidelines
Content guidelines will be dependent on the type of element that is inserted into the content area. See individual component guidelines for specifics.
Style
Content and image
- Quote or image container padding: 30 px top and bottom. Side padding is removed so element is flush left and right.
- Insets follow this format below 601px breakpoint
Inset
- Width: 270px for 601 px breakpoint and above.
- Padding: 30px all sides for 601 px breakpoint and above.
- Alignment: right side of main content
- Rule line: Top rule is optional
- Elements within the the inset (links, call to action etc) follow prefooter styling below 601 px