Jump to main content

Blockquote

Most commonly, you'll see blockquotes used in websites for customer reviews or presenting important passages of text someone else has spoken. Traditionally you would have 'blockquote' tags, with the paragraph of text and attribution nested inside. However the HTML5 spec has changed slightly, and the 'cite' tags now need to be placed outside of the 'blockquote' tags. So it could be better to wrap the whole lot inside figure tags. This snippet will present the website author with a long text element for the main content of the blockquote. A short text element is used for the citation source. Blockquotes can be extensively restyled using CSS.

Example

Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.
Steve Jobs

HTML & PHP 

<figure class="blockquote-container">
  <blockquote>
    <?php webyep_longText("Quotation", false, "", true, 600, 400); ?>
  </blockquote>
  <figcaption>
    <cite>
      <?php webyep_shortText("Attribution", false, 550, 240); ?>
    </cite>
  </figcaption>
</figure>

CSS

.blockquote-container {
    margin: 2rem;
    padding-left: 2rem;
    width: 75%;
    border-left: 1px solid #ccc;
}

.blockquote-container blockquote {
    padding: 0 0 1rem 0;
    margin: 0;
}

.blockquote-container cite {
    font-size: 80%;
    font-style: italic;
}

Javascript