skip to main content
Select font family
Select colour theme
Profile picture - Ahmad Ainul Rizki Ahmad Ainul Rizki
Profile logo - Ahmad Ainul RizkiCD
  • Home
  • About me
  • Now
  • Portfolio
  • Blog
  • Components

Blockquotes

A Blockquote is a block of content that is quoted from another source.

  • Follow me on Twitter twitterlink to twitter profile
  • View my Github profile githublink to github profile
  • View my Codepen profile codepenlink to codepen profile
the entry point more recently for non-traditionally educated people has been the bootcamps. They are typically teaching a framework-heavy style of development which gets students as quickly as possible up to speed with the technologies most likely to get them a job. However, I see from the questions I get from those who have been through that type of training, the basics are often glossed over at best.
Rachel Andrew, HTML, CSS and our vanishing industry entry points

Blockquotes should:

  • Be contained by a blockquote tag
  • Use the cite tag to distinguish the quote from the attribution
  • Use figcaption to wrap the cite element and figure to wrap the entire quotation

Blockquotes should not:

  • Be used for inline quotations

Code

Use the tabs to view the blockquotes source code.

Use left and right arrows to navigate between tabs.
  • HTML
  • CSS

HTML

                      
                      
  <figure class="quote">
  <blockquote>
    the entry point more recently for non-traditionally educated people has been the bootcamps. They are typically teaching a framework-heavy style of development which gets students as quickly as possible up to speed with the technologies most likely to get them a job. However, I see from the questions I get from those who have been through that type of training, the basics are often glossed over at best.
  </blockquote>
  <figcaption>Rachel Andrew,
      <cite><a href="https://rachelandrew.co.uk/archives/2019/01/30/html-css-and-our-vanishing-industry-entry-points/">HTML, CSS and our vanishing industry entry points</a></cite>
    </figcaption>
</figure>

                    

CSS


  /*
Blockquote
----------------------------------- */

blockquote {
  background: var(--colour-grey-light);
  padding: 1rem;
  margin-bottom: 1rem;
  border: solid 1px var(--colour-grey);
}

blockquote:before,
blockquote:after {
  font-family: var(--font-family);
  color: var(--colour-pink);
  font-size: 2rem;
  line-height: 0.1rem;
}

blockquote:before {
  content: open-quote;
  margin-right: 0.25rem;
  vertical-align: -0.2rem;
}

blockquote:after {
  content: close-quote;
  margin-left: 0.25rem;
  vertical-align: -0.3rem;
}


                    
Back to all components
  • Home
  • About me
  • Now
  • Portfolio
  • Blog
  • Components
  • Follow me on Twitter twitterlink to twitter profile
  • View my Github profile githublink to github profile
  • View my Codepen profile codepenlink to codepen profile

Proudly powered by Eleventy. Hosted on Netlify, last updated September 15th 2020, at 10:55:45 - privacy.