Class Quote
A visual element that helps highlight and distinguish quoted or featured content from regular text.
Implements
Inherited Members
Namespace: Unity.AppUI.UI
Assembly: Unity.AppUI.dll
Syntax
[UxmlElement]
public class Quote : BaseVisualElement, IEventHandler, IResolvedStyle, ITransform, ITransitionAnimations, IExperimentalFeatures, IVisualElementScheduler, IContextOverrideElement, IAdditionalDataHolderRemarks
The Quote component is a specialized visual container that creates a distinctive block for showcasing quoted content, testimonials, or any text that needs to be visually separated from the surrounding content. It uses a vertical border line that can be customized in color to create visual hierarchy and improve content readability.
This component follows a minimalist design approach, using subtle visual cues rather than heavy quotation marks or backgrounds, making it suitable for both formal and casual user interfaces.
The Quote component is particularly useful in documentation, testimonials, blog posts, or any context where you need to highlight specific content while maintaining the overall flow of the interface.
Examples
Basic usage of the Quote component: A simple quote with attribution
<ui:Quote>
<ui:Label text="The best way to predict the future is to invent it."/>
<ui:Label text="- Alan Kay" class="quote-attribution"/>
</ui:Quote>Creating a Quote programmatically with custom content: Creating a quote with custom styling and nested elements
var quote = new Quote();
quote.color = Color.blue;
var content = new Label();
content.text = "Innovation distinguishes between a leader and a follower.";
quote.Add(content);
var attribution = new Label();
attribution.text = "- Steve Jobs";
attribution.AddToClassList("quote-attribution");
quote.Add(attribution);
Using Quote in a complex layout: Integrating a quote within a larger content structure
<ui:VerticalLayout>
<ui:Label text="Key Insights:" class="heading"/>
<ui:Quote color="#4CAF50">
<ui:VerticalLayout spacing="8">
<ui:Label text="First, solve the problem. Then, write the code." />
<ui:Label text="- John Johnson" class="quote-attribution"/>
</ui:VerticalLayout>
</ui:Quote>
</ui:VerticalLayout>Constructors
Quote()
Default constructor.
Declaration
public Quote()Fields
containerUssClassName
The Quote container styling class.
Declaration
public const string containerUssClassName = "appui-quote__container"Field Value
| Type | Description |
|---|---|
| string |
ussClassName
The Quote main styling class.
Declaration
public const string ussClassName = "appui-quote"Field Value
| Type | Description |
|---|---|
| string |
Properties
color
The Quote outline color.
Declaration
[CreateProperty]
[UxmlAttribute]
public Optional<Color> color { get; set; }Property Value
| Type | Description |
|---|---|
| Optional<Color> |
contentContainer
The content container of the Quote.
Declaration
public override VisualElement contentContainer { get; }Property Value
| Type | Description |
|---|---|
| VisualElement |