Javascript is not enabled.

Javascript must be enabled to use this site. Please enable Javascript in your browser and try again.

Design System - IN BETA

Getting Started            Components            Presets             Templates

Containers

The Core Component Container component allows for the creation of a container for multiple additional components on a page.

Editor to Copy/Paste
Training
Figma Design

Container with Default Border

Lorem ipsum dolar sit amet consectetur.

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.

Container with Rounded Corner

Lorem ipsum dolar sit amet consectetur.

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.

Container with Border Right

Lorem ipsum dolar sit amet consectetur.

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.

Container Grid Columns & Background Colors

Lorem ipsum dolar sit amet consectetur.

Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Training

The Core Component Container component enables the creation of a container for multiple additional components on a page, allowing them to be grouped and styled uniformly. Containers are also used to create the initial layout for the page. You can’t make a page layout or a preset feature without using a container.

Training Video

20:46

Authoring Capability

  • Layout - The Container will default to Responsive Grid. To ensure that it works. You have to remember to open the dialogue and save.

  • Background Color - You can set a background color for your container. The list of AARP colors are:
    • Chalk: HEX Code #f5f5f5
    • Deep Ink (Black): HEX Code #121212
    • White: HEX Code #ffffff
    • AARP Brand Red: #HEX Code #ec1300
    • Accessible Red: HEX Code #dd1200
    • Peeble (Gray): HEX Code #676767
    • Dark Gray: HEX Code #77726b
    • Purple: HEX Code #Sc0033
    • Peach: HEX Code #FFC9AB
    • Dark Red: HEX Code #B2001a
    • Maroon: Hex Code #5c0033
    • Pink: HEX Code #ffc5c0
    • Wolf: HEX Code #7c7c7c
    • Gray: HEX Code #e6e7e8
    • Brand (Ethel Red): HEX Code #cf4445
    • Pink: HEXCode #fa8fa8
    • Light (Blush): HEX Code #f7e1e1
    • Khaki (Ethel Brand): HEX Code #e20c5
    • Green (Ethel Brand): HEX Code #0c412f
    • Light (Girlfriend): HEX Code #ecf6fb
    • Rust (Sisters Brand): HEX Code #98361e
    • Orange (Sisters Brand): HEX Code #f15a38
    • Light Peach (Sisters Brand): HEX Code #fcded7
    • Light Hover (Sisters Brand): HEX Code #3d160c
  • Label - Value of an aria-label attribute for the containers, which describes the container content. 
  • Role - HTML ROLE attribute to apply to the component.
  • Backrgound Opacity - Opacity range frome 0 to 1, where 0 is fully transparent and is fully opaqueOpacity will be applied to the background.
  • Background Image - You have the ability to set a background image for the container. This allows you to add Text components over an image.
  • ID - HTML ID This can be used to identify a section of a page. It is used for anchor link tagging
  • Data Attribute (Analytics ID) - This is the field where the data-element-id will go for click tracking purposes.
  • Min Height - You have the ability to set a minimum height for the container. This is rarely ever used.
  • Link for Container - You can make the entire container link to a page. This is used at times. One example, is it is used when a container is used to create a tile.
  • Hide on AMP - Hides this section from AMP.
  • Hide Comments Section - If you have added the Viafoura comments component inside of this container. You can hide it.
  • SEO Schema Type  - The author has the option of selecting "None" or "Membership Details" from the dropdown. For most pages, the None option will be selected.

  • Layout Type - You have the option of setting the layout of Full-width or Fixed Width.

  • Flex Vertical - You have the option from selecting between none, top, center, or bottom.

  • Flex Horizontal - You have the option from selecting between none, left, center, or right.

  • Vertical padding - You have the option from selecting between different forms of vertical padding such as:
    • 8 Top
    • 16 Top
    • 24 Top
    • 32 Top
    • 40 Top
    • 60 Top
    • 80 Top
    • 8 Bottom
    • 16 Bottom
    • 24 Bottom
    • 30 Bottom
    • 40 Bottom
    • 60 Bottom
    • 80 Bottom 

  • Horizontal Padding - You have the option from selecting between different forms of horizontal padding such as:
    • 8 Left
    • 16 left
    • 24 Left
    • 32 Left
    • 40 Left
    • 60Left
    • 80 left
    • 8 Right
    • 16 Right
    • 24 Right
    • 32 Right
    • 40 Right
    • 60 Right
    • 80 Right

  • Border - You have the option from selecting between different boarders such as: none, default border, rounded border, border right, or border left

  • Mega Menu - Utility - Not being used

  • Display Type - You can select what is displaying:

    • None

    • Modal

    • Wall

    • Leaving Modal

  • Grid Styles Override (dropdown) - Author has the option to select the following:
    • Children with - auto
    • Children padding - none    
       
  • Brand Color Border (dropdown) - Allows an author to place a branded border in several ways. Those options are as follows: 
    • Top brand Color Border
    • Bottom Brand Color Border
    • Left Brand Color Border
    • Right Brand Color Border

  • AI Config - You can set this container for AI functionality or you can set it for curated container or none.

  • Desk Top View - Default setting is ideal and this setting is rarely touched.

  • Tablet View - Default setting is ideal and this setting is rarely touched.

  • Mobile View - Default setting is ideal and this setting is rarely touched.