Pull quote

Left aligned appearances

Our Left aligned appearance should only be used between 2 blocks of paragraph copy. It aligns perfectly with our paragraph component, and comes in 2 sizes, and neither option allows for a profile picture (to not visually disrupt the content too much):

Small: Use this option if you don’t want to visually interrupt the content too much. It’s more subtle than our “large” appearance, and does not take up as much space.

Large: Use this option if you need a more “impactful” visual appearance.

• Padding usage note: By default, the bottom padding is set to off. This is to maintain equal spacing between two paragraph blocks.
  • This should remain off whenever this component sits in the middle of multiple paragraphs/sections.
  • If it is the LAST component in your paragraph, (i.e. sits above a full-width component), then have the publisher uncheck the “hide bottom padding” option in the DCR.
  • See example here
     

Small appearance

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Large appearance

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.

Rules and recommendations

Center aligned appearances

Our Center aligned appearance is centered in the browser and should be used with other full-bleed components. This appearance also come in 2 sizes, “Small” and “Large”.

Small

Use this option if you don’t want to visually interrupt the content too much. It’s more subtle than our “large” appearance, and does not take up as much space.

• You can turn off the profile picture, attribution name, and title to reduce the height even more if you need

Large

Use this option if you need a more “impactful” visual appearance. It should be used for specific high-traffic campaign pages, and should help set up diverse and related content for visitors to explore. We recommend using this appearance sparingly and getting pre-approval from the design team prior to rolling your page out.

Rules and recommendations

Alternate variations

To help you visualize different possible layouts and background colors, we stacked a few components together to give you a more clear understanding of how this could look.

Here you can see:

• Appearance with profile picture set to hidden in BLK_White with top/bottom borders
• Appearance with no profile, name, or title

Center aligned examples

Below you can see some sample layouts for our center aligned appearance. This is strictly a visual example and to help guide best-practices.

Reminder — Key feature to note:

• In this component, you have the ability to turn component-level top, bottom or both padding options on or off
  • Note: Use this is to solve “double” padding issues when stacking similar colored components together which may cause large gaps to appear
  • See example here