The Quote element is available across all three builders. The Content Builder, the Header Builder and the Footer Builder. The purpose of the element is to be used as a way to display blockquotes within an article, customer testimonials, and any sort of cited information that is needed within a page design.
The Quote element is made up of many sub elements that work towards achieving its desired effect. The breakdown of how this markup works is as follows:
- Quote (
- Opening Mark (
.x-quote-mark-opening - Optional, uses the "Graphic" partial)
- Content (
- Text (
x-quote-text - The actual quoted text)
- Citation (
x-quote-cite - Optional, includes the quote citation and an optional "Graphic" partial)
- Closing Mark (
.x-quote-mark-closing - Optional, uses the "Graphic" partial)
We can see that there are many optional pieces to this element, all of which can be used to achieve a great many different looks depending on how we set things up.
In this section we will walk through each control grouping and pay special attention to any unique controls or things of note.
In this first control grouping, the main thing to take notice of is the initial Content box:
Here is where you will set the main body for your quote text, as well as an optional citation if desired. Keep in mind that while the quote text is required, citations are optional. Leaving the Citation field blank will hide the "Citation" control grouping in your control navigation.
After that, you will find the traditional controls for things such as basic setup, margin, padding, borders, shadows, et cetera.
Next, we have the Marks control grouping, which starts out with the Marks Setup box:
The "Marks" for the Quote element are effectively two optional graphic partials that can be turned on or off as needed to achieve various looks. They flank the content in the markup, and can only be output in a row or a column fashion. This means if output as a row, the opening mark will always be at one end, with content in the middle, and the closing mark at the far end. If output as a column, the opening mark will be on top, the content will be below that, and the closing mark below that.
Once you have the general direction of your marks setup, you can then using the alignment properties to specify where those marks should be positioned along their axis. This can lend itself to many different looks depending on how you set things up. For example, here is a Quote with the marks "Direction" set to Row and both marks are aligned Start:
Here is a different style, still set to Row but marks are aligned Center:
Here is another Row example, but the opening mark is aligned to Start, while the closing mark is aligned to *End. Next, we've used a little negative margin on each graphic to offset them a bit, creating a very cool staggered look:
Additionally, we can utilize only one mark at a time if we want. For instance, here is a Row layout with only the opening mark enabled. Also, instead of using an icon for the graphic, we've set it to an image and are using it to setup a layout with a picture of the person saying the quote:
Finally, we can take that same concept but use a Column layout and only display the closing mark, which is aligned to the End of its axis:
As you can see, we can utilize these marks in many, many different ways depending on the types of graphics we use, the overall orientation of our quote, and the alignment they take on. Take some time to experiment with various types of content, directions, and alignment to see what you can come up with!
Next we have the Citation control grouping, which is fairly straightforward. In the Setup box, the citation can be positioned before or after the text vertically, and that is really the only "custom" control for this section.
One thing to note for the Citation is that it has a Flex Layout control, which is used to position the contents of the citation, which includes not only the text, but an optional Graphic partial. To see this in action, I have used one of our quote examples from above, but placed a background color on the Citation so that we can see the area it occupies. Notice that the citation is fullwidth. Also, the layout is set to Row and is horizontally aligned to the Start and vertically aligned Center:
Now if we horizontally align our content Center we get the following:
Notice how it moves all of our child elements (the graphic and text) relative to the container. If we were to horizontally align this content using Space Between, we would get:
Take note of how each item has been placed to the far sides of the container to create this "Space Between" effect. So all that the Flex Layout is doing is orienting the child elements within their container, but the container itself remains in tact, and it also has nothing to do with things such as aligning your text to be centered, or right aligned, et cetera. Also, keep in mind you can use a Column layout to stack the Graphic inside the Citation on top of your text, and you can also reverse both Row and Column layouts to place the Graphic and text at different ends.
Finally, if you want to align the Citation itself to different ends of the Quote, you can do so using margins. So if you wanted your Citation box to be left-aligned, you would use
auto as the right margin:
To right-align the Citation box, you would use
auto as the left margin:
And to horizontally center, you would use
auto as both left and right margins:
This is really only necessary to do if you are styling your Citation box to have a "physical" appearance either with a background color, border, or box shadow, and you want it to be visually oriented to one side or the other, so it is a helpful thing to keep in mind for those situations.
Other than that, the Citation is fairly standard with margin, padding, borders, shadows, text controls, et cetera, and then the optional Graphic partial has its own sets of controls you will likely be very familiar with from other Elements.