Quote Widget

Quote Widget

Last updated 03.29.24

The Quote Widget is a plug and play component designed to add a styled quote to the page. This document goes over recommended images sizes and configuration settings.

  • Built to include quote text & quote author text
  • Certain transformations include an optional photo
  • Certain transformations include elements that can be in brand or custom colors
  • Certain transformations include background color that can be in brand or custom colors
  • Has a variety of margin and padding settings

Add Quote Widget to the page

1. Select where on the page you would like the widget to appear. 
2. Click on the blue plus add widget icon   
3. Select the Quote widget from the widget pop up 
4. Once the widget is added to the page, hover over the added widget until it displays the properties and trash icons. Click on the gear-shaped properties icon. 

Quote Widget Properties

5. In the Quote properties pop up, adjust various settings including text content, quote style transformations and margins and padding.

6. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.

How to reposition the Quote Widget

Hover over the Quote widget until it displays the grab icon on the left. Simply drag and drop in a new location. 

Quote Widget Properties

PROPERTYDESCRIPTION
VisibleChecking and unchecking the checkbox toggles widget visibility on the page. This allows for prepping the content in edit mode before widget debut.
Quote ContentText entry field with text editor allowing a maximum of 500 characters. This property allows they styling of the quote text to be of different sizes, colors and styles.
Quote AuthorOptional text entry field for quote author's name allowing a maximum of 50 characters
Author TitleOptional text entry field for quote author's title allowing a maximum of 50 characters
Invert Text ColorTypically the widget can guess if the text should be dark or white depending on what color background is behind it. But if the visual can be improved by a change from one to the other, click the Invert Text Color checkbox.
TransformationSelect the layout transformation (visual presentation) for the quote:
  • Outline Box without Photo
  • Outline Box with Photo
  • Simple Paragraph without Photo
  • Simple Paragraph with Photo
Line & Icon ColorSelect from your custom brand colors or grayscale options from the menu. Additionally, you can select any color by adding the hexidecimal color code. Below is the list of Line colors that can be selected:
  • Default (#707070)
  • Primary
  • Primary Color - Light
  • Primary Color - Dark
  • Secondary
  • Secondary - Light
  • Secondary - Dark
  • Gradient
  • White
  • Light Gray
  • Medium Gray
  • Dark Gray
  • Black
  • Custom (enter color in hex format – ex. #2c6090)
ImageOptional photo or graphic image to display above quote. Recommended size is 250 pixels high with varied width depending on design choice. Recommended maximum image size is 100K.
Image TitleThe title attribute on an image adds a tooltip with title text to the image. Hovering the mouse over the image will display the tooltip. Optional but recommended.
Image Alt TextThis attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error, or if the user uses a screen reader). Optional but recommended.
Margin
Use margin to increase spacing between the quote widget and other widgets on the page. This is helpful to provide visual room between elements and increase readability.

Top
User can select from 1-5 rems to increase spacing above the quote widget

Bottom
User can select from 1-5 rems to increase spacing below the quote widget

Right
User can select from 1-5 rems to increase to the right of the quote widget

Left
User can select from 1-5 rems to increase spacing to the left of the quote widget
Padding
Use padding to increase spacing outside of the quote widget

Top
User can select from 1-5 rems to increase room above the top of quote widget

Bottom
User can select from 1-5 rems to increase room below the bottom of the quote widget

Right
User can select from 1-5 rems to increase room outside to the right of the quote widget

Left
User can select from 1-5 rems to increase room outside of the left of the quote widget
Custom CSS
Code provided by the Atlas development team to achieve custom effects

Quote Widget Examples


Every man is said to have his peculiar ambition. Whether it be true or not, I can say, for one, that I have no other so great as that of being truly esteemed of my fellow-men, by rendering myself worthy of their esteem. How far I shall succeed in gratifying this ambition is yet to be developed.

Abraham Lincoln

President of the United States



If you find it in your heart to care for somebody else, you will have succeeded.

Maya Angelou

American Author


We keep moving forward, opening new doors, and doing new things, because we're curious and curiosity keeps leading us down new paths.

Walt Disney

American Animator & Producer

Character is just another word for having a perfectly disciplined and educated will.

A person can make his own character by blending these elements with an intense desire to achieve excellence. Everyone is different in what I will call magnitude, but the capacity to achieve character is still the same.

Vince Lombardi

American Football Coach