💬Blockquote
Last updated
Last updated
The Blockquote Component is used to highlight quoted content on a webpage, enhancing its impact and readability. You can use it in your Webstudio project to emphasize text that has been taken directly from another source, such as quotes, excerpts, or references.
The "Blockquote" component can be found in Components > Text, and you can place it on your canvas by dragging and dropping it or clicking it in the Components panel. To edit the content of your Blockquote instance, simply double-click it.
Once the component is placed on your canvas, you can customize its appearance using the Style panel on the right. You can also create a design token for this styling. This allows you to apply consistent styling on multiple blockquotes across your project by reusing the same design token for each instance.
For more on Design Tokens in Webstudio, refer to this guide.
It is a good practice to attribute the quoted text you use in a blockquote with the source's title, author, publication, URL, or any relevant information that identifies where the quote came from. This maintains transparency and credibility in your content. It also allows readers to verify the accuracy of the information and fosters ethical use of others' words.
You can add an attribution or citation by using the “Cite” property in your Blockquote instance settings or with the “Cite” Tag from a Text component.
If you want to include a URL link as a citation:
Choose your blockquote instance in the canvas or the Navigator.
Go to Settings > Properties on the right.
Add the URL in the "Cite" property.
Please note that this value will not be visible to the end-user.
If you want to include a Name/Title as a citation alongside your Blockquote:
Add a Text component to your Blockquote instance by dragging and dropping it or clicking it in the Components panel.
After positioning it correctly, go to Settings and select Tag > Cite.
Double-click the "Cite" instance on your canvas to edit it and add your citation.
Please note that this value will appear as italicized text to the end-user.
