Virginia Tech®home

Pull quotes and side bars

User view of pulled items

Pulled items have two different style types. There’s the vt-pullQuote class that will add the corner decorations to the container and a vt-pullOutdent class that does not have decorations. In order to style the quote or general text in the pulled item, that component will need two classes, vt-quote-text, if it is a quote with attribution a second text component with the classes vt-quote-attribution assigned to it is needed. If creating a side bar using the vt-pullOutdent class on the container you can place any other components into the container to be pulled left or right. To use the same text treatment, simply add the vt-quote-text classes to the text component you want styled similarly.

The position and size of the pulled item is determined by Bootstrap classes:

  • pull-right OR pull-left  -- position of pulled item
  • col-lg-7 -- width of pulled item at mobile and desktop sizes, respectively

To start a pulled item:

  1. Drag and drop a "Container" component on the page where desired
  2. Click on the container component to open its toolbar
  3. Click the wrench icon in the toolbar
  4. Click in the "CSS Class" field and type: vt-pullQuote OR vt-pullOutdent
  5. Type the position and size classes into the Container CSS Class field, e.g., pull-right col-lg-7
  6. Click the checkmark in the top-right of the dialog to accept the changes

If creating a decorated pull quote:

  1. Drag and drop two "Text" components into the Container component
  2. Click on the first text component to open its toolbar
  3. Click the wrench icon in the toolbar
  4. Click in the "CSS Class" field and type: vt-quote-text
  5. Click the checkmark in the top-right of the dialog to accept the changes
  6. Click on the first text component to open its toolbar
  7. Click on the pencil icon in the component toolbar to enter edit mode
  8. Type the quote text
  9. Click the checkmark far right in the toolbar
  10. Click on the second text component to open its toolbar
  11. Click the wrench icon in the toolbar
  12. Click in the "CSS Class" field and type: vt-quote-attribution
  13. Click the checkmark in the top-right of the dialog to accept the changes
  14. Click on the first text component to open its toolbar
  15. Click on the pencil icon in the component toolbar to enter edit mode
  16. Type the attribution text
  17. Click the checkmark far right in the toolbar

Pull Quote Config Dialogs

Pull Outdent (side bar) Config Dialogs

The image component does not need an additional class.