Maine DOE Web Design Center

This guide is a reference for editors building and updating pages on the Maine Department of Education website. Each tab contains live previews and ready-to-copy HTML snippets for the most common components used across the site.

How to Use This Guide

Step 1 — Browse the tabs. Each tab above covers a different component type: Cards, Accordions, Tables, Buttons, Blockheads, and Contact Cubes. Click a tab to see all available variants for that component.

Step 2 — Preview before you copy. Every component shows a live preview above its code block so you can see exactly how it will render on the page. The preview uses the same CSS as the live site, so what you see here is what you get.

Step 3 — Copy the code. Click the Copy button in the top-right corner of any dark code block to copy the full HTML snippet to your clipboard.

Step 4 — Paste into the source editor. In Drupal, open the page you want to edit, click into the body field, then switch to Source view (the <> button in the CKEditor toolbar). Paste the copied code at the appropriate point in the page source.

Step 5 — Replace placeholder content. Update all placeholder text, links, image paths, and UUIDs with your actual content. Look for values like Card Title, /your-link, YOUR-UUID, and YOUR-IMAGE.png — these are the spots that need to be customized.

Step 6 — Switch back to visual view and save. After pasting and editing the source, click Source again to return to the visual editor and confirm everything looks right, then save the page normally.

Image UUIDs: When you insert an image through the Drupal media browser, it automatically fills in the data-entity-uuid attribute. If you are pasting image HTML manually, upload the image through the media browser first to get the correct UUID, then copy it into the snippet.

What’s in This Guide

Cards — Bootstrap card components for highlighting content with headers, images, lists, and call-to-action buttons. Available in 1, 2, and 3-column layouts.

Accordions — Expandable/collapsible panels for organizing large amounts of content without overwhelming the page. Good for FAQs, policy details, and resource lists.

Tables — Standard striped tables for structured data, and searchable DataTables for longer datasets that benefit from filtering and sorting.

Buttons — Full-width block buttons and centered auto-width buttons for calls to action inside and outside of cards.

Blockheads — Dark gradient section header bars. Supports H1–H6 for proper heading hierarchy. See the Blockheads tab for accessibility guidance.

Contact Cube — Styled contact information boxes for staff listings. Supports single and multiple contacts with a divider.

Video Tutorial

New to editing pages in Drupal? Watch this walkthrough to get familiar with the source editor, media browser, and saving your changes.

1 Card — Header + Button

Full-width card with a colored header bar and a single full-width button.

Preview

Card Title

Body text describing the content of this card goes here.

Button Label

HTML

<div class="row justify-content-center">
  <div class="col-sm-12">
    <div class="card">
      <div class="card-header text-white bg-primary mb-3">
        <strong>Card Title</strong>
      </div>
      <div class="card-body">
        <p>Body text here.</p>
        <a class="btn btn-info btn-lg btn-block mt-4"
           href="/your-link">Button Label</a>
      </div>
    </div>
  </div>
</div>

1 Card — Header + List + Button

Full-width card with a header, bulleted resource links, and a CTA button.

Preview

Card Title

Body text here.

Center	Location	Next Full
Capital Area Technical Center	Augusta	2023-2024 F
Region 4, United Technologies Center	Bangor	2024-2025 F
Bath Regional Career and Technical Center	Bath	2020-2021 S

Organization	Phone	Website
Maine Department of Education	207-624-6600	www.maine.gov/doe
Maine School Management Association	207-622-3473	www.msma.org
Maine Education Association	207-622-5866	www.mea.org
Maine Parent Federation	207-588-1933	www.mpf.org

Maine.gov

Drupal Web Design Center for Maine DOE

Maine DOE Web Design Center

Card Title

Card Title One

Card Title Two

Card Title One

Card Title Two

Card Title Three

Page Title (H1)

Major Section Title (H2)

Subsection Title (H3)

Sub-Subsection Title (H4)

Minor Heading (H5)

Small Label (H6)

Contact

Contact