Blockquote

The Blockquote component is a UI element used to visually distinguish and highlight quoted text or excerpts from a particular source.

Introduction

It is commonly used in articles, blog posts, and other content to give emphasis to specific text and attribute it to its original author. The blockquote component allows for customization in terms of style and color to match the overall design of the website or application.

Visual representation

The following is a visual representation of the blockquote in use along with it's code usage.

<blockquote class="aegov-quote" cite="https://mohap.gov.ae/en/about-us/minister-message">
	<svg class="quote-icon" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M29.25 10.5H40.5C41.2956 10.5 42.0587 10.8161 42.6213 11.3787C43.1839 11.9413 43.5 12.7044 43.5 13.5V25.5C43.5 26.2956 43.1839 27.0587 42.6213 27.6213C42.0587 28.1839 41.2956 28.5 40.5 28.5H29.25V30C29.25 31.5913 29.8821 33.1174 31.0074 34.2426C32.1326 35.3679 33.6587 36 35.25 36C35.6478 36 36.0294 36.158 36.3107 36.4393C36.592 36.7206 36.75 37.1022 36.75 37.5C36.75 37.8978 36.592 38.2794 36.3107 38.5607C36.0294 38.842 35.6478 39 35.25 39C32.8638 38.9975 30.5761 38.0485 28.8888 36.3612C27.2015 34.6739 26.2525 32.3862 26.25 30V13.5C26.25 12.7044 26.5661 11.9413 27.1287 11.3787C27.6913 10.8161 28.4544 10.5 29.25 10.5ZM29.25 25.5H40.5V13.5H29.25V25.5ZM7.5 10.5H18.75C19.5456 10.5 20.3087 10.8161 20.8713 11.3787C21.4339 11.9413 21.75 12.7044 21.75 13.5V25.5C21.75 26.2956 21.4339 27.0587 20.8713 27.6213C20.3087 28.1839 19.5456 28.5 18.75 28.5H7.5V30C7.5 31.5913 8.13214 33.1174 9.25736 34.2426C10.3826 35.3679 11.9087 36 13.5 36C13.8978 36 14.2794 36.158 14.5607 36.4393C14.842 36.7206 15 37.1022 15 37.5C15 37.8978 14.842 38.2794 14.5607 38.5607C14.2794 38.842 13.8978 39 13.5 39C11.1138 38.9975 8.82607 38.0485 7.13878 36.3612C5.45149 34.6739 4.50248 32.3862 4.5 30V13.5C4.5 12.7044 4.81607 11.9413 5.37868 11.3787C5.94129 10.8161 6.70435 10.5 7.5 10.5ZM7.5 25.5H18.75V13.5H7.5V25.5Z" fill="#343330"></path>
	</svg>
	<p>The confidence of our wise leadership serves as motivation for more sincere and
		sustained action directed to serve our cherished homeland, which reflects a renewed
		incentive to continue with progress and advancement under the wise leadership of His
		Highness Sheikh Mohamed bin Zayed Al Nahyan, UAE President, and His Highness Sheikh
		Mohammed bin Rashid Al Maktoum, Vice President and Prime Minister of the UAE and
		Ruler of Dubai and their Highnesses, Members of the Supreme Council and Rulers of
		the Emirates.</p>
	<div class="quote-footer">
		<div class="quote-author">AbdulRahman Bin Mohammed Al Owais</div>
		<div class="quote-cite">Minister of Health & Prevention</div>
	</div>
</blockquote>

An important note

Citation is a very important element of using a blockquote. The cite attribute must be added to reference a source from where the quote was obtained.

It is added to the <blockquote> element to link the quote back to its original author or the location from where it was taken.

However, when the citation of the quote is the page itself, it is recommended to reference the page URL itself and add the ID of the element along with the URL. Learn more about citation futher

Code structure

The basic code structure of the blockquote component is as follows:

<blockquote class="aegov-quote" cite="www.example.com">
	<svg class="quote-icon" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M29.25 10.5H40.5C41.2956 10.5 42.0587 10.8161 42.6213 11.3787C43.1839 11.9413 43.5 12.7044 43.5 13.5V25.5C43.5 26.2956 43.1839 27.0587 42.6213 27.6213C42.0587 28.1839 41.2956 28.5 40.5 28.5H29.25V30C29.25 31.5913 29.8821 33.1174 31.0074 34.2426C32.1326 35.3679 33.6587 36 35.25 36C35.6478 36 36.0294 36.158 36.3107 36.4393C36.592 36.7206 36.75 37.1022 36.75 37.5C36.75 37.8978 36.592 38.2794 36.3107 38.5607C36.0294 38.842 35.6478 39 35.25 39C32.8638 38.9975 30.5761 38.0485 28.8888 36.3612C27.2015 34.6739 26.2525 32.3862 26.25 30V13.5C26.25 12.7044 26.5661 11.9413 27.1287 11.3787C27.6913 10.8161 28.4544 10.5 29.25 10.5ZM29.25 25.5H40.5V13.5H29.25V25.5ZM7.5 10.5H18.75C19.5456 10.5 20.3087 10.8161 20.8713 11.3787C21.4339 11.9413 21.75 12.7044 21.75 13.5V25.5C21.75 26.2956 21.4339 27.0587 20.8713 27.6213C20.3087 28.1839 19.5456 28.5 18.75 28.5H7.5V30C7.5 31.5913 8.13214 33.1174 9.25736 34.2426C10.3826 35.3679 11.9087 36 13.5 36C13.8978 36 14.2794 36.158 14.5607 36.4393C14.842 36.7206 15 37.1022 15 37.5C15 37.8978 14.842 38.2794 14.5607 38.5607C14.2794 38.842 13.8978 39 13.5 39C11.1138 38.9975 8.82607 38.0485 7.13878 36.3612C5.45149 34.6739 4.50248 32.3862 4.5 30V13.5C4.5 12.7044 4.81607 11.9413 5.37868 11.3787C5.94129 10.8161 6.70435 10.5 7.5 10.5ZM7.5 25.5H18.75V13.5H7.5V25.5Z" fill="#343330"></path>
	</svg>
	<p>
		...Quote Text...
	</p>
	<div class="quote-footer">
		<div class="quote-author"> ...Quote Author... </div>
		<div class="quote-cite"> ...Text... </div>
	</div>
</blockquote>

Variations

Variations are different versions of this component that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.

Coloured blockquote

A coloured variation of the blockquote is acceptable with a distinct background color.

The variation is useful when you want the blockquote to look different and stand our on a white page. Add the ` .quote-colored ` class to the container and remove the SVG icon.

<blockquote class="aegov-quote quote-colored" cite="https://www.example.com">
	<p>The confidence of our wise leadership serves as motivation for more sincere and sustained action directed to serve our cherished homeland, which reflects a renewed incentive to continue with progress and advancement under the wise leadership of His Highness Sheikh Mohamed bin Zayed Al Nahyan, UAE President, and His Highness Sheikh Mohammed bin Rashid Al Maktoum, Vice President and Prime Minister of the UAE and Ruler of Dubai and their Highnesses, Members of the Supreme Council and Rulers of the Emirates.</p>
	<div class="quote-footer">
		<div class="quote-author">AbdulRahman Bin Mohammed Al Owais</div>
		<div class="quote-cite">Minister of Health & Prevention</div>
	</div>
</blockquote>

Behaviour

The blockquote element represents a section that is quoted from another source. Content inside a blockquote typically indicates that it's an excerpt from another source. The blockquote component visually distinguishes quoted content from the surrounding text by applying appropriate styles.

The default variation uses a subtle icon to indicate a quote, while the colored variation may use background colors and other visual cues.

Purpose

To credit a statement or passage from an external source, like a quotation from a person, a book, an article, or any other medium. This is also referred to as Citation.
To emphasize a particular section of text, making it stand out from the rest of the content. Essentially, to highlight a phrase.
In articles or stories, blockquotes can be the "break up" in long sections of text and provide readers with a visual cue or a thematic shift.

Accessibility

When using the blockquote component, it is essential to ensure that the ` cite ` attribute is added to provide a valid URL or reference to the source of the quoted content. This attribute allows assistive technologies, such as screen readers, to convey the source of the quote to user's.
If the quote is referenced for the first time on the page itself, make sure you add the ` .quote-footer ` class along with the identifing classes for author.

RTL support

This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.

The following is an example of this component with text in Arabic.

ولا بد أن تشكل ثقة القيادة الكريمة للدولة دافعاً للمزيد من العمل المتواصل المخلص لخدمة وطننا الغالي، وهي حافز متجدد لمزيد من العطاء والعمل، لمواصلة مسيرة التقدم والرقي في ظل القيادة الرشيدة لصاحب السمو الشيخ محمد بن زايد آل نهيان رئيس الدولة حفظه الله، وأخوه صاحب السمو الشيخ محمد بن راشد آل مكتوم نائب رئيس الدولة، رئيس مجلس الوزراء حاكم دبي رعاه الله واخوانهم أصحاب السمو أعضاء المجلس الأعلى حكام الإمارات.

عبد الرحمن بن محمد العويس

وزير الصحة ووقاية المجتمع

All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.

The typography guidelines will also provide further information on use of the font stack for the Arabic language.

What is citation?

A citation, in the context of quotations and references, refers to a way of giving credit to the source of a particular quote, idea, or piece of information. In the context of the ` <blockquote> ` element, the citation is the source reference.

If the quote being published has been taken from another source, then add the ` cite="" ` attribute to the quote object and add the URL of the source.

If the quote being published is appearing on your website for the first time, wrap the name of the author in the footer with ` <cite> ` and add the ` cite="" ` attribute to the quote object with the URL including the ID of the quote section.

Usage

We recommend that blockquotes be used in all forms of news, blog articles and specefic sections of the website where there is a quote referencing published earlier or stated by a person.

Where to use a blockquote?

The blockquote element serves as a tool for emphasizing and distinguishing specific text excerpts, particularly when quoting content from another source. Its use is versatile and can be appropriate in various parts of a website. Here are some common scenarios where a blockquote might be fitting:

Within news and media articles when you are referencing a quote.
On a blog post when you need to reference a published quote.
Within any content article where there is a need to reference.
When you need to quote a testimonial.
On a PDF document that is a research or academic publication.
On reports and whitepapers.

Spacing

Spacing is an essential feature of the design system. Learn more about spacing in our guidelines. The following rules are applicable towards a blockquote.

The footer that includes the name and additional details put have atleast 2.5 rem of top margin.
The quote itself must have a horizontal padding of 2.5 rem and must be indendented from the remaining copy.
It is also advisable to have a vertical padding of 1.5 rem, although this can be more if required depending on the context of where you place the blockquote.