Chatfield East Property Owners Association
CEPOAWatch
Watching the CEPOA Board So You Don’t Have To  ·  Littleton, Colorado

CEPOAWatch Block Reference

Copy any snippet and paste into the Article Sidebar metabox (sidebar widgets) or a Custom HTML block in the post editor (article blocks). Replace placeholder text with your content.

Jump to Sidebar Widgets  ·  Jump to Article Blocks

Verdict Boxes
Use in groups of 2–4. Each box has a red uppercase label and body text. Good for "what was claimed vs. what the record shows" type summaries.
Preview
Label One

Verdict text goes here. Keep it concise — one or two sentences.

Label Two

Verdict text goes here.

<div class="sidebar-widget">
  <div class="sidebar-widget-title"><i class="bi bi-check2-square me-1 text-red"></i> Widget Title Here</div>
  <div class="verdict-box">
    <div class="verdict-label">Label One</div>
    <p class="verdict-text">Paste your text here.</p>
  </div>
  <div class="verdict-box">
    <div class="verdict-label">Label Two</div>
    <p class="verdict-text">Paste your text here.</p>
  </div>
  <div class="verdict-box">
    <div class="verdict-label">Label Three</div>
    <p class="verdict-text">Paste your text here.</p>
  </div>
</div>
Bylaw Callout — Dark
Black background, white text. Use for direct quotes from bylaws or official policy documents.
Preview
Bylaws Section 6.10 — Open Meetings
"Members or their designated representatives shall be permitted to speak regarding that issue."
Signed October 15, 2025
<div class="sidebar-widget">
  <div class="sidebar-widget-title"><i class="bi bi-file-earmark-text me-1 text-red"></i> Widget Title Here</div>
  <div class="bylaw-callout">
    <div class="bylaw-callout-label">Section X.XX — Section Title</div>
    <div class="bylaw-callout-text">"Paste quoted text here."</div>
    <div class="bylaw-callout-cite">Signed/Effective Date</div>
  </div>
</div>
Bylaw Callout — Light
Off-white background, dark text. Use for descriptions of policy sections rather than direct quotes.
Preview
Conduct of Meetings Policy — Section 8
Ten lettered rules govern recognition, time limits, civility, and conduct during open forum.
Effective November 25, 2023
<div class="sidebar-widget">
  <div class="sidebar-widget-title"><i class="bi bi-file-earmark-text me-1 text-red"></i> Widget Title Here</div>
  <div class="bylaw-callout-light">
    <div class="bylaw-callout-label">Policy Name — Section Title</div>
    <div class="bylaw-callout-text">Paste description here.</div>
    <div class="bylaw-callout-cite">Effective Date</div>
  </div>
</div>
Unanswered Questions Box
Off-white box with a numbered list. Use for questions that went unanswered by the board.
Preview
Questions With No Response
  1. First unanswered question here.
  2. Second unanswered question here.
  3. Third unanswered question here.
<div class="sidebar-widget">
  <div class="sidebar-widget-title"><i class="bi bi-question-circle me-1 text-red"></i> Still Unanswered</div>
  <div class="unanswered-box">
    <div class="unanswered-label">Questions With No Response</div>
    <ol>
      <li>Paste question here.</li>
      <li>Paste question here.</li>
      <li>Paste question here.</li>
    </ol>
  </div>
</div>
Related Documents
Linked list of source documents. Use bi-file-pdf for PDFs, bi-envelope for emails, bi-camera-video for recordings. Links display in blue to match the HTML site.
Preview
Document Title
Email — Sender, Date
Meeting Recording — Date
<div class="sidebar-widget">
  <div class="sidebar-widget-title"><i class="bi bi-file-earmark-text me-1 text-red"></i> Related Documents</div>
  <div class="source-docs-list">
    <div class="doc-item"><a href="URL"><i class="bi bi-file-pdf"></i> Document Title</a></div>
    <div class="doc-item"><a href="URL"><i class="bi bi-envelope"></i> Email — Sender, Date</a></div>
    <div class="doc-item"><a href="URL"><i class="bi bi-camera-video"></i> Meeting Recording — Date</a></div>
  </div>
</div>
Sidebar Stat — Dark
Black background, large red number, white label, gray sub-text. Stack 2–4 for data-heavy articles.
Preview
103 Total Lots in CEPOA The full community the board represents. 
<div class="sidebar-widget">
  <div class="sidebar-widget-title"><i class="bi bi-bar-chart-fill me-1 text-red"></i> The Numbers at a Glance</div>
  <div class="sidebar-stat">
    <span class="sidebar-stat-number">103</span>
    <span class="sidebar-stat-label">Stat Label Here</span>
    <span class="sidebar-stat-sub">Supporting context here.</span>
  </div>
  <div class="sidebar-stat">
    <span class="sidebar-stat-number">44</span>
    <span class="sidebar-stat-label">Second Stat Label</span>
    <span class="sidebar-stat-sub">Supporting context here.</span>
  </div>
</div>
Sidebar Stat — Light
White background, red number, muted label and sub-text. Use when you want a lighter feel matching the HTML site's Numbers at a Glance widget.
Preview
103 Total Lots in CEPOA The full community the board represents.
44 Unique Responding Lots 43% of the community. 
<div class="sidebar-widget">
  <div class="sidebar-widget-title"><i class="bi bi-bar-chart-fill me-1 text-red"></i> The Numbers at a Glance</div>
  <div class="sidebar-stat-light">
    <span class="sidebar-stat-number">103</span>
    <span class="sidebar-stat-label">Stat Label Here</span>
    <span class="sidebar-stat-sub">Supporting context here.</span>
  </div>
  <div class="sidebar-stat-light">
    <span class="sidebar-stat-number">44</span>
    <span class="sidebar-stat-label">Second Stat Label</span>
    <span class="sidebar-stat-sub">Supporting context here.</span>
  </div>
</div>
Sidebar Pull Quotes (Board's Own Words)
Two styles — neutral (grey border) and red border. Use to highlight direct quotes from documents or correspondence.
Preview
"Participation levels will be visible based on the number of responses received."
— Board President, March 11 email
"I am going to try and keep things general."
— Board President, April 23 reply
<div class="sidebar-widget">
  <div class="sidebar-widget-title"><i class="bi bi-chat-square-quote me-1 text-red"></i> Board's Own Words</div>
  <div class="sidebar-pull-quote-neutral">
    "Paste quote here."
    <div class="sidebar-pull-attribution">— Name, Date</div>
  </div>
  <div class="sidebar-pull-quote-red">
    "Paste contrasting quote here."
    <div class="sidebar-pull-attribution">— Name, Date</div>
  </div>
</div>
Your Right to Records
Text block with a button. Use to remind readers of their legal right to inspect records.
Preview

Under Colorado law (§38-33.3-209.5), homeowners may request to inspect association records including correspondence, financial documents, and meeting materials.

Learn More About Your Rights 
<div class="sidebar-widget">
  <div class="sidebar-widget-title"><i class="bi bi-info-circle me-1 text-red"></i> Your Right to Records</div>
  <p style="font-size:0.85rem;font-family:'Source Serif 4',serif;color:var(--muted);line-height:1.7;">
    Under Colorado law (§38-33.3-209.5), homeowners may request to inspect association records including correspondence, financial documents, and meeting materials. Requests must be made in writing.
  </p>
  <a href="/about" class="btn btn-outline-dark btn-sm" style="border-radius:0;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;width:100%;">Learn More About Your Rights</a>
</div>

Article Blocks — paste into a Custom HTML block in the post editor

Email Excerpt
Gray left border, monospace-style header with envelope icon, serif body text. Use for quoted emails from board members or correspondence.
Preview
<div class="email-excerpt">
  <div class="email-excerpt-header"><i class="bi bi-envelope me-1"></i> Sender Name to Recipient — Date</div>
  <p class="email-excerpt-body">"Paste quoted email text here."</p>
</div>
Policy Rules List
Red top border, lettered items a through j with dark squares. Add class "covered" to the letter square and a policy-rule-tag for cited items.
Preview
Policy Name — Section Title
Brief description of this policy section.
a
Regular rule text here.
b
Cited rule text here. Edwards Cited This
<div class="policy-rules">
  <div class="policy-rules-title"><i class="bi bi-file-earmark-text me-1"></i> Policy Name — Section Title</div>
  <div class="policy-rules-subtitle">Brief description of this policy section.</div>
  <div class="policy-rule-item">
    <div class="policy-rule-letter">a</div>
    <div class="policy-rule-text">Rule text here.</div>
  </div>
  <div class="policy-rule-item">
    <div class="policy-rule-letter covered">b</div>
    <div class="policy-rule-text">Cited rule text. <span class="policy-rule-tag">Edwards Cited This</span></div>
  </div>
  <div class="policy-rule-item">
    <div class="policy-rule-letter">c</div>
    <div class="policy-rule-text">Rule text here.</div>
  </div>
</div>
Document Excerpt Box
Black top border, document title header with file icon, red left-bordered quote, source line at bottom. Use for quoted sections of official documents.
Preview
Document Title — Section (Date)

"Quoted document text here."

Source: Document Name, Section X.X
<div class="doc-box">
  <div class="doc-box-title"><i class="bi bi-file-earmark-text me-1"></i> Document Title — Section (Date)</div>
  <p class="doc-text">"Paste quoted document text here."</p>
  <div class="doc-source">Source: Document Name, Section X.X</div>
</div>
Pull Quote
Red left border, italic Playfair serif, off-white background. Use for standout quotes from correspondence or documents mid-article.
Preview

"Pull quote text here."

— Attribution, Date 
<div class="pull-quote">
  <p>"Paste pull quote text here."</p>
  <cite>— Attribution, Date</cite>
</div>
Editor Note (CEPOAWatch Note)
Black background, red label, white body text. Use for CEPOAWatch editorial context that is separate from the reported facts.
Preview
CEPOAWatch Note

Editor note text here.

<div class="editor-note">
  <div class="editor-note-label"><i class="bi bi-shield-fill me-1"></i> CEPOAWatch Note</div>
  <p>Paste editor note text here.</p>
</div>
Timeline
Vertical left border with dot markers. Add class "highlight" to a li for a red dot. Always precede with an h3 heading to get the ruled title line.
Preview

Timeline

  • Month Year — Event Name Description of highlighted timeline event.
  • Month Day, Year Description of regular timeline event. 
<h3>Timeline</h3>
<ul class="timeline">
  <li class="highlight">
    <span class="timeline-date">Month Year — Event Name</span>
    Description of highlighted event.
  </li>
  <li>
    <span class="timeline-date">Month Day, Year</span>
    Description of regular event.
  </li>
  <li class="highlight">
    <span class="timeline-date">Month Day, Year — Response</span>
    Description of highlighted event.
  </li>
  <li>
    <span class="timeline-date">Month Day, Year</span>
    Description of regular event.
  </li>
</ul>
Promise Box (What Was Said vs. What Was Done)
Black top border, two-column comparison. Use promise-made (green check) for promises kept and promise-broken (red x) for promises broken. Separate groups with hr.
Preview
What the Board Said vs. What the Board Did
Promise: What was promised.
What happened: What actually occurred.
<div class="promise-box">
  <div class="promise-box-title"><i class="bi bi-list-check me-1"></i> What the Board Said vs. What the Board Did</div>
  <div class="promise-item">
    <span class="promise-icon promise-made"><i class="bi bi-check-circle-fill"></i></span>
    <div><strong>Promise:</strong> Paste promise text here.</div>
  </div>
  <div class="promise-item">
    <span class="promise-icon promise-broken"><i class="bi bi-x-circle-fill"></i></span>
    <div><strong>What happened:</strong> Paste result text here.</div>
  </div>
  <hr>
  <div class="promise-item">
    <span class="promise-icon promise-made"><i class="bi bi-check-circle-fill"></i></span>
    <div><strong>Promise:</strong> Paste second promise here.</div>
  </div>
  <div class="promise-item">
    <span class="promise-icon promise-broken"><i class="bi bi-x-circle-fill"></i></span>
    <div><strong>What happened:</strong> Paste result here.</div>
  </div>
</div>
Data Comparison Table
Black header row, alternating hover rows. Use result-board for the "as reported" column (muted/italic) and result-real for the "actual" column (bold red). Add result-note inside a cell for annotation below the value.
Preview
Survey Finding As Reported by Board Adjusted for Full Community
"Finding description here" XX%~X of Y respondents ~XX%X of 103 lots
"Second finding here" XX%~X of Y respondents ~XX%X of 103 lots 
<div class="data-table-wrap">
  <table class="data-table">
    <thead>
      <tr>
        <th>Survey Finding</th>
        <th>As Reported by Board</th>
        <th>Adjusted for Full Community</th>
      </tr>
    </thead>
    <tbody>

      <!-- ── ROW 1 ── -->
      <tr>
        <td>"Finding description here"</td>
        <td class="result-board">XX%<span class="result-note">~X of Y respondents</span></td>
        <td class="result-real">~XX%<span class="result-note">X of 103 lots</span></td>
      </tr>

      <!-- ── ROW 2 ── -->
      <tr>
        <td>"Finding description here"</td>
        <td class="result-board">XX%<span class="result-note">~X of Y respondents</span></td>
        <td class="result-real">~XX%<span class="result-note">X of 103 lots</span></td>
      </tr>

      <!-- ── ROW 3 ── -->
      <tr>
        <td>"Finding description here"</td>
        <td class="result-board">XX%<span class="result-note">~X of Y respondents</span></td>
        <td class="result-real">~XX%<span class="result-note">X of 103 lots</span></td>
      </tr>

      <!-- ── ROW 4 ── -->
      <tr>
        <td>"Finding description here"</td>
        <td class="result-board">XX%<span class="result-note">~X of Y respondents</span></td>
        <td class="result-real">~XX%<span class="result-note">X of 103 lots</span></td>
      </tr>

      <!-- ── ROW 5 ── -->
      <tr>
        <td>"Finding description here"</td>
        <td class="result-board">XX%<span class="result-note">~X of Y respondents</span></td>
        <td class="result-real">~XX%<span class="result-note">X of 103 lots</span></td>
      </tr>

      <!-- ── ROW 6 ── -->
      <tr>
        <td>"Finding description here"</td>
        <td class="result-board">XX%<span class="result-note">~X of Y respondents</span></td>
        <td class="result-real">~XX%<span class="result-note">X of 103 lots</span></td>
      </tr>

    </tbody>
  </table>
</div>
Correction Notice
Yellow background, red left border, bold red label. Automatically renders at the top of any article when filled in via the Correction Notice metabox. Use this snippet only if you need to add it manually.
Preview
Correction
May 15, 2026

An earlier version of this article stated X. The correct information is Y. We regret the error.

<div class="correction-notice">
  <div class="correction-label"><i class="bi bi-pencil-fill me-1"></i> Correction</div>
  <div class="correction-date">Month Day, Year</div>
  <p class="correction-text">An earlier version of this article stated X. The correct information is Y. We regret the error.</p>
</div>

Powered by
►
Necessary cookies enable essential site features like secure log-ins and consent preference adjustments. They do not store personal data.
None
►
Functional cookies support features like content sharing on social media, collecting feedback, and enabling third-party tools.
None
►
Analytical cookies track visitor interactions, providing insights on metrics like visitor count, bounce rate, and traffic sources.
None
►
Advertisement cookies deliver personalized ads based on your previous visits and analyze the effectiveness of ad campaigns.
None
Powered by