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

Quotes

The HTML <q> element indicates that the enclosed text is a short inline quotation.

  • Follow me on Twitter twitterlink to twitter profile
  • View my Github profile githublink to github profile
  • View my Codepen profile codepenlink to codepen profile

In The Problem with Patterns, Ahmad Ainul Rizki warns that patterns should never sacrifice user context for efficiency and consistency.

Quotes should:

  • Use the cite tag to distinguish the quote from the attribution

Quotes should not:

  • Be used for block quotations
  • Have the default quotation marks removed

Code

Use the tabs to view the quotes source code.

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

HTML

                      
                      
  <p>In The Problem with Patterns, Ahmad Ainul Rizki warns that <q cite="https://bejoistic.com/posts/the-problem-with-patterns/">patterns should never sacrifice user context for efficiency and consistency</q>.</p>

                    

CSS


  /*
Quotations
----------------------------------- */
q,
.quote {
  margin: 2rem 0;
  font-style: italic;
}


                    
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.