UIKit blockquote component
The Blockquote component is for adding a blockquote with a source name and link to a layout.
Key information about this component:
Layout canvas elements
- Container - Provides a container for the blockquote. This is required for using the component as a card with a background color.
- Visually hidden heading - Adds a heading to the component that uses the quote source name. This is useful for screen readers.
- Footer element - Contains the quote name and source within a footer element.
- Blockquote - Provides the blockquote element and the blockquote text.
- Name - Provides a span element to display the name of the person who said the quote.
- Occupation / Organization - Provides a span to display the occupation and organization of the person who said the quote.
- Quote source - Provides a <cite> element for the the quote source
- Link - Provides a link to the quote source
Component form fields
- Quote - Adds a blockquote. This field is required.
- Name - Adds the name of the person who said the quote. This field is optional.
- Occupation / Organization - Adds the occupation and/or organization of the person who said the quote. This field is optional.
- Source URL - Adds a link to the source of the quote. This field is optional.
- Show source - Toggle on to display the Source URL as a link on the component.
- Background color - Adds a background color from the color palette. When a background color is selected, the text color will be selected automatically.
- Text color - Sets an appropriate Light or Dark text color to contrast with the color of where the component is placed. Note: The text field only shows if no background color is selected.
- Left border color - Sets the left border color.
- Height - Sets the component height to either Fit to content or Fill space available. Fill space available will make the component expand to fill the height available within the parent component. This option allows you to create layouts where the height of multiple components are the same, achieving horizontal alignment.
- Add space below - Adds a space (margin) below the component. This is required if a space is required when adding the component above another component within the same parent layout component.