💬 Blockquote Styles Design Guide

Blockquotes є semantic HTML elements (<blockquote>) для displaying citations, quotations від external sources, testimonials, або referenced material. Unlike pull quotes (що repeat content вже present), blockquotes show new content від іншого джерела. Proper blockquote styling improves credibility, visually distinguishes quoted material, та provides clear attribution. Для mushroom education site, blockquotes essential для citing research papers, expert opinions, historical texts, або user testimonials. Цей guide охоплює multiple visual styles, semantic HTML, citation formatting, та accessibility.

🎨 Blockquote Visual Styles

Style 1: Classic Border-Left

"Psilocybin has shown remarkable efficacy in clinical trials для treatment-resistant depression, з response rates significantly exceeding conventional antidepressants. The compound's ability для promote rapid, sustained therapeutic outcomes represents a paradigm shift в psychiatric treatment." Dr. Roland Griffiths, Johns Hopkins University

Style 2: Card з Large Quote Marks

The remarkable safety profile of psilocybin, combined з low addiction potential, positions it as одне з найперспективніших psychotherapeutic tools currently under investigation. Proper set and setting remain paramount. — MAPS Research Team, 2024

Style 3: Centered Testimonial

"Following 25 years of treatment-resistant depression, a single psilocybin-assisted therapy session provided більше relief than two decades of conventional pharmaceutical interventions. The experience was profoundly transformative." Clinical Trial Participant, Imperial College Study

Style 4: Academic Citation

Stone mushroom effigies discovered across Mesoamerican archaeological sites, dating from 1000 BCE до 500 CE, provide compelling evidence of sacramental mushroom use в pre-Columbian civilizations. These artifacts reveal sophisticated cultural integration of entheogenic practices. Archaeological Evidence of Ritual Mushroom Use, Journal of Ethnopharmacology, 2019

💻 HTML & CSS Implementation

Semantic HTML Structure:

<!-- Proper semantic blockquote -->
<blockquote class="research-quote">
  <p>Psilocybin demonstrates significant efficacy для treatment-resistant depression, з sustained effects observable 6-12 months post-treatment.</p>
  <cite>
    <a href="https://doi.org/...">Johnson et al., JAMA Psychiatry, 2023</a>
  </cite>
</blockquote>

<!-- Testimonial з author info -->
<blockquote class="testimonial">
  <p>"This cultivation guide transformed my understanding of mycology. Clear, comprehensive, scientifically accurate."</p>
  <footer>
    <cite>— Alex Chen, Mycology Student</cite>
  </footer>
</blockquote>

Style 1: Classic Border-Left

/* Simple, effective, universally recognized */
blockquote.classic {
  margin: 30px 0;
  padding: 25px 30px;
  border-left: 5px solid #fcb69f;
  background: #fff9f3;
  font-size: 1.15em;
  font-style: italic;
  color: #34495e;
}

blockquote.classic cite {
  display: block;
  margin-top: 15px;
  font-style: normal;
  font-size: 0.9em;
  color: #6c757d;
}

blockquote.classic cite::before {
  content: "— "; /* Em dash before attribution */
}

Style 2: Card з Quote Marks

blockquote.card {
  margin: 30px 0;
  padding: 35px;
  background: white;
  border: 2px solid #fcb69f;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(252, 182, 159, 0.2);
  position: relative;
  font-size: 1.2em;
}

/* Large decorative quote mark */
blockquote.card::before {
  content: '"';
  position: absolute;
  top: -5px;
  left: 20px;
  font-size: 5em;
  color: #fcb69f;
  opacity: 0.3;
  font-family: Georgia, serif;
}

Style 3: Centered Testimonial

blockquote.testimonial {
  margin: 40px auto;
  max-width: 700px;
  padding: 40px;
  text-align: center;
  background: linear-gradient(135deg, #fff9f3 0%, #fff5ef 100%);
  border-radius: 15px;
  font-size: 1.3em;
  font-style: italic;
}

blockquote.testimonial cite {
  display: block;
  margin-top: 20px;
  font-style: normal;
  font-weight: 700;
  color: #2c3e50;
}

📚 Citation Formatting

Research Papers

<cite>
  <a href="DOI_link">
    Author et al., Journal Name, Year
  </a>
</cite>

Example:

Griffiths et al., JAMA Psychiatry, 2016

Expert Quotes

<cite>Dr. Name, Affiliation</cite>

Example:

Dr. Roland Griffiths, Johns Hopkins University

Historical Texts

<cite>
  Author, "Title", Year
</cite>

Example:

R. Gordon Wasson, "Seeking the Magic Mushroom", 1957

User Testimonials

<cite>— Name, Context</cite>

Example:

— Sarah M., Clinical Trial Participant

♿ Accessibility Considerations

Proper Semantic HTML:

<!-- GOOD: Semantic blockquote -->
<blockquote cite="https://source-url.com">
  <p>Quote text here</p>
  <footer>
    <cite>Attribution</cite>
  </footer>
</blockquote>

<!-- BAD: Divs masquerading as blockquotes -->
<div class="quote"> <!-- Screen readers won't recognize -->
  Quote text
</div>

Screen Reader Support:

  • Use <blockquote> element (semantic meaning)
  • Include cite attribute з source URL
  • Use <cite> element для attribution
  • Ensure sufficient color contrast (4.5:1 minimum)

✅ Blockquote Design Checklist

Implementation Checklist:

  • ☐ Semantic <blockquote> element used
  • ☐ Visual distinction від body text (border, background, або both)
  • ☐ Font-size: 1.1-1.3x body text
  • ☐ Italic style (optional but recommended)
  • ☐ Proper attribution з <cite>
  • ☐ Attribution visually distinguished (smaller, different color)
  • ☐ Margins: 30-40px top/bottom
  • ☐ Padding: 20-35px all sides
  • ☐ Color contrast meets WCAG AA (4.5:1)
  • ☐ Cite attribute з source URL (if applicable)
  • ☐ Responsive: Adjusted margins/padding на mobile
  • ☐ Tested з screen readers