Цитата простая, незатейливая, без дополнительных элементов

Самый стандартный вариант оформления цитаты — «поиграть со шрифтами». Например, укрупнённый шрифт, изменённый цвет, другое начертание: курсив или полужирное. Возможно другое семейство шрифтов, увеличенное межстрочное расстояние, возможно, все буквы будут прописные. Обычно у подписи кегль меньше, а начертание контрастнее.

Цитата встроена в абзац, наклон в источнике — по умолчанию, саму цитату мы выделили цветом

Вёрстка элемента

<blockquote class="quote"> <p>Не сдаваться! Не отступать! Таков спартанский закон. И по этому спартанскому закону мы будем стоять! Воевать! Умирать! Наступает новая эра. Эра свободы! И все будут помнить, что три сотни спартанцев до последнего вздоха её защищали!</p> <cite>Царь Леонид</cite></blockquote>.quote { font-family: "Montserrat", "Arial", sans-serif; text-align: center;}.quote p { font-style: italic; font-weight: normal; font-size: 22px; line-height: 40px; color: #744ce6;}.quote cite { font-style: normal; font-weight: 500; font-size: 16px; line-height: 40px; color: #aaaaaa;}

Второй по типичности — то же самое, но в дополнение появляется обводка или фон. Фон обычно неброский, просто заливка. Обводка может быть со всех сторон, только слева, или сверху и снизу.

Цитата встроена в абзац и выделена рамками по бокам

Вёрстка элемента

<blockquote class="quote"> <p>Самые ошибочные умозаключения людей суть следующие: вещь существует, следовательно, она имеет право на это. </p> <cite>«Человеческое, слишком человеческое». Фридрих Ницше</cite></blockquote>.quote { width: 740px; padding: 10px 50px; border-right: 8px solid #d5d5d5; border-left: 8px solid #d5d5d5; font-family: "Merriweather", "Times New Roman", serif; font-style: normal; font-weight: normal; color: #333333;}.quote p { margin-top: 0; font-size: 27px; line-height: 50px;}.quote cite { font-size: 16px; line-height: 30px; font-style: normal;}

Обратный отступ

Рассмотрим ещё один пример. Это вроде как цитата, но в данном контексте это акцентная мысль. Стоит подать именно так.

Пример стилизации обратного отступа

Вёрстка элемента

<article> <p>Сначала — неприятные задачи. В любой работе есть неприятные задачи — их всегда хочется отложить на потом. Нередко это самое «потом» наступает слишком поздно. Если задачу в принципе нельзя скипнуть, то лучше ей заняться в начале рабочего дня. Так вы не растеряете фокус и преждевременно не отправите задачу в очередь.</p> <p class="accent"> «Не имеет смысла нанимать толковых людей, а затем рассказать им, что делать; мы нанимаем умных людей, чтобы они могли рассказать нам, что делать». Так говорил Стив Джобс. </p> <p>Если вдруг вы выполнили план на день буквально за несколько часов и у вас, по идее, куча свободного времени — это не значит, что рабочий день закончился. В это время можно заняться какими-то другими делами по работе, разобрать бэклог, или спросить у руководителя, что делать дальше.</p></article>p { padding-left: 50px; font-family: "Merriweather", "Times New Roman", serif; font-style: normal; font-weight: 300; font-size: 16px; line-height: 27px; color: #333333;}.accent { padding-left: 0; font-family: "Roboto", "Arial", sans-serif; font-style: normal; font-weight: normal; font-size: 32px; line-height: 44px; color: #333333;}