Web Components & CMS Patterns

Card Component

Use the OTC card component to group related information, links, contacts, or calls to action. Cards use a base class with optional grid, surface, accent, alignment, and content modifiers.

CSS Location

The production CSS for this component is maintained in the shared OTC Shared Component CSS component. Styles used only to present examples on this reference page are kept separate from the production component CSS.

Basic Structure

Place one or more cards inside an otc-card-grid. Add a grid modifier when the cards should display in two or three columns on larger screens.

<div class="otc-card-grid otc-card-grid--3">
  <section class="otc-card">
    <h3 class="otc-card__title">Card heading</h3>

    <p>Card content goes here.</p>
  </section>
</div>

Class Reference

Grid Classes

Two- and three-column grids automatically become one column on smaller screens.

Card Classes

Modifier classes may be combined:

<section class="otc-card otc-card--surface otc-card--top-accent">
  ...
</section>

Content Classes

Live Examples

Default Cards

Default cards use only the base card class. They have a border, transparent background, and no top accent.

<div class="otc-card-grid otc-card-grid--3">
  <section class="otc-card">
    <h3 class="otc-card__title">First Card</h3>
    <p>Card content goes here.</p>
  </section>

  <section class="otc-card">
    <h3 class="otc-card__title">Second Card</h3>
    <p>Card content goes here.</p>
  </section>

  <section class="otc-card">
    <h3 class="otc-card__title">Third Card</h3>
    <p>Card content goes here.</p>
  </section>
</div>

Surface and Top Accent

The surface and top-accent modifiers may be used independently or together.

<section class="otc-card otc-card--surface">
  ...
</section>

<section class="otc-card otc-card--top-accent">
  ...
</section>

<section class="otc-card otc-card--surface otc-card--top-accent">
  ...
</section>

Card with an Icon

Add otc-card__icon to a Font Awesome icon. Decorative icons should include aria-hidden="true".

<section class="otc-card">
  <i
    class="fas fa-id-card otc-card__icon"
    aria-hidden="true"
  ></i>

  <h3 class="otc-card__title">Bring Photo Identification</h3>

  <p>
    Bring a valid government-issued photo ID to present during check-in.
  </p>
</section>

Card with Link Rows

Use an unordered list with otc-card__links when the card primarily links to related pages or resources.

<section class="otc-card otc-card--surface otc-card--top-accent">
  <h3 class="otc-card__title">Reporting &amp; Support</h3>

  <ul class="otc-card__links">
    <li>
      <a href="/campus-safety-reporting">
        Reporting a Concern
      </a>
    </li>

    <li>
      <a href="/safety-contacts">
        Safety Contacts
      </a>
    </li>
  </ul>
</section>

Aligned Cards

Use aligned cards when neighboring cards have a heading, description, and link list that should begin at matching vertical positions.

Add otc-card-grid--aligned to the grid. Each aligned card must contain these three direct children in this order:

1. A heading with otc-card__title.
2. A description with otc-card__body.
3. A list with otc-card__links.

<div class="otc-card-grid otc-card-grid--3 otc-card-grid--aligned">
  <article class="otc-card otc-card--top-accent">
    <h3 class="otc-card__title">
      Mental health and referral support
    </h3>

    <p class="otc-card__body">
      Find mental-health information, referral assistance,
      and support services.
    </p>

    <ul class="otc-card__links">
      <li>
        <a href="#">Mental Health Resources</a>
      </li>
    </ul>
  </article>

  <article class="otc-card otc-card--top-accent">
    <h3 class="otc-card__title">
      Campus contacts
    </h3>

    <p class="otc-card__body">
      Connect with a campus contact who can help identify
      the appropriate resource.
    </p>

    <ul class="otc-card__links">
      <li>
        <a href="#">View Safety Contacts</a>
      </li>
    </ul>
  </article>
</div>

Full-Width Card

Add otc-card--full when a card should span every column in a multi-column grid.

<div class="otc-card-grid otc-card-grid--2">
  <article class="otc-card otc-card--top-accent otc-card--full">
    <h3 class="otc-card__title">Not sure where to start?</h3>

    <p>
      These contacts can help you identify the appropriate resource.
    </p>
  </article>
</div>

Accessibility and Usage Notes

• Use the heading level appropriate to the surrounding page structure. The otc-card__title class controls visual styling independently of heading level.
• Use semantic elements that match the card content. A card may be a section, article, or another appropriate container.
• Decorative icons should use aria-hidden="true". Do not use an icon as the only way to communicate important information.
• Omit otc-card--surface when the card should retain a transparent background.
• Omit otc-card--top-accent when the card should use only the standard border.
• Use otc-card-grid--aligned only when every aligned card follows the required title, body, and links structure.
• Use otc-card--full only inside a multi-column card grid.

Table Component

Use the OTC table component for structured data that needs clear row and column relationships. The component provides consistent borders, spacing, alternating rows, hover and focus states, captions, and accessible table markup while allowing each table to define its own column proportions and specialized behavior.

The default table uses the OTC orange header. Modifier classes may be added for dense data tables, blue headers, horizontally scrollable tables, numeric data, campus availability, and other common table needs.

CSS Location

The production CSS for this component is maintained in the shared OTC Shared Component CSS component. Styles used only to present examples on this reference page are kept separate from the production component CSS.

Basic Structure

Every standard OTC table uses an otc-table-wrap wrapper and an otc-table table. Define relative column widths in a <colgroup> within each table rather than adding column-specific width rules to the shared CSS.

<div class="otc-table-wrap">
  <table class="otc-table">
    <caption>Example contact information</caption>

    <colgroup>
      <col style="width: 30%;" />
      <col style="width: 40%;" />
      <col style="width: 30%;" />
    </colgroup>

    <thead>
      <tr>
        <th scope="col">Campus</th>
        <th scope="col">Contact</th>
        <th scope="col">Phone</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th scope="row">Main</th>
        <td>Example Contact</td>
        <td>(407) 555-0123</td>
      </tr>
    </tbody>
  </table>
</div>

Class Reference

Core Classes

Cell Modifier Classes

Live Examples

Standard Table

The default table is fluid and uses the standard OTC orange header. Column proportions belong in the table’s <colgroup>.

<div class="otc-table-wrap">
  <table class="otc-table">
    <caption>Example campus contact information</caption>

    <colgroup>
      <col style="width: 20%;" />
      <col style="width: 30%;" />
      <col style="width: 25%;" />
      <col style="width: 25%;" />
    </colgroup>

    <thead>
      <tr>
        <th scope="col">Campus</th>
        <th scope="col">Name</th>
        <th scope="col">Title</th>
        <th scope="col">Phone</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th scope="row">Main</th>
        <td>Example Contact</td>
        <td>Resource Teacher</td>
        <td>
          <a href="tel:+14075550123;ext=7001234">
            <span class="otc-table__phone-number">(407) 555-0123,</span><wbr><span class="otc-table__phone-ext"> ext. 700-1234</span>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Captions

Tables should include a meaningful <caption>. Captions are visible by default. When a visible heading immediately before the table already provides the same context, add otc-visually-hidden to the caption rather than removing it.

<h4>Campus Deans</h4>

<div class="otc-table-wrap">
  <table class="otc-table">
    <caption class="otc-visually-hidden">
      Campus Dean contact information by campus
    </caption>

    ...
  </table>
</div>

Phone Numbers and Extensions

Keep the main phone number and extension from breaking internally. Add a <wbr> between them so the browser may wrap at the extension when space is limited.

<a href="tel:+14075550123;ext=7001234">
  <span class="otc-table__phone-number">(407) 555-0123,</span><wbr><span class="otc-table__phone-ext"> ext. 700-1234</span>
</a>

Secondary Cell Details

Use otc-table__detail when a cell contains a primary value plus a secondary description that should begin on a new line.

<td>
  Dean
  <span class="otc-table__detail">
    Example responsibility area
  </span>
</td>

Blue Header Variant

Add otc-table--blue when a table needs the dark-blue header treatment. This is used for specialized fee and PDF-related data tables where the blue treatment should remain visually consistent with neighboring content.

<div class="otc-table-wrap">
  <table class="otc-table otc-table--blue">
    ...
  </table>
</div>

Dense Tables

Add otc-table--dense for large data tables where standard table padding would make the table unnecessarily tall or wide. The modifier changes spacing and type size but does not change the table semantics.

<table class="otc-table otc-table--dense">
  ...
</table>

Wide, Horizontally Scrollable Tables

Standard OTC tables should remain fluid and should not scroll horizontally. Horizontal scrolling is reserved for tables whose data structure genuinely requires more width, such as the 17-column Tuition & Fees tables.

Add otc-table-wrap--scroll to the wrapper, make the region keyboard focusable, and assign the specialized table an appropriate minimum width. Include visually hidden instructions explaining that the table can be scrolled horizontally.

This example table may be scrolled horizontally.

<p class="otc-visually-hidden" id="fee-table-scroll-help">
  This fee table may be scrolled horizontally.
</p>

<div
  class="otc-table-wrap otc-table-wrap--scroll"
  role="region"
  tabindex="0"
  aria-labelledby="fee-table-heading"
  aria-describedby="fee-table-scroll-help"
>
  <table
    class="otc-table otc-table--blue otc-table--dense"
    style="min-width: 1930px;"
  >
    ...
  </table>
</div>

Campus Availability Cells

Availability tables may use highlighted checkmark cells. The checkmark is decorative; include visually hidden Yes or No text so the meaning is available without relying on the symbol or the OTC accent color alone.

<!-- Offered at this campus -->
<td class="otc-table__availability otc-table__availability--yes">
  <span aria-hidden="true">✓</span>
  <span class="otc-visually-hidden">Yes</span>
</td>

<!-- Not offered at this campus -->
<td class="otc-table__availability">
  <span class="otc-visually-hidden">No</span>
</td>

Column Widths

Do not add shared CSS rules such as nth-child() selectors to control the widths of individual columns. Column proportions depend on the content of each table and should be defined locally with <colgroup>.

<colgroup>
  <col style="width: 11%;" />
  <col style="width: 19%;" />
  <col style="width: 20%;" />
  <col style="width: 20%;" />
  <col style="width: 30%;" />
</colgroup>

The percentages should normally total 100%. Because the base table uses table-layout: fixed, these proportions remain predictable while the table itself expands or contracts with its container.

Accessibility Requirements

• Use real HTML table markup for tabular data. Do not recreate data tables with grids, columns, or manually spaced text.
• Include a meaningful <caption> for every table. Use otc-visually-hidden when the caption would unnecessarily duplicate a nearby visible heading.
• Use <th scope="col"> for column headers.
• When the first cell of a row identifies that row, use <th scope="row"> rather than a regular <td>.
• Do not communicate information with color or symbols alone. Availability cells include visually hidden Yes or No text.
• If abbreviated column headings are used visually, provide the complete heading text to assistive technology.
• Do not remove visible keyboard focus indicators from links or horizontally scrollable table regions.
• Use a focusable, labeled region for a table that requires horizontal scrolling so keyboard users can reach and operate the scrolling container.
• Avoid forcing normal tables to a fixed or minimum width. Horizontal scrolling is a specialized treatment for tables whose data cannot reasonably reflow.

Usage Notes

• The wrapper owns the outside border, rounded corners, and clipping. Do not add separate corner-radius rules to the first and last header cells.
• The default table is fluid and fills the width of its parent container.
• Use otc-table--blue only where there is a design or content reason for the blue header; the standard OTC table header remains orange.
• Use otc-table--dense for large data sets rather than making all OTC tables smaller.
• Keep content-specific styles separate from the generic table component. For example, Tuition & Fees defines its own minimum table width while still using the shared OTC table classes.
• Use overflow-wrap selectively for content such as long email addresses. Do not apply aggressive arbitrary word breaking to every table cell.
• When a phone number includes an extension, use the shared phone spans and place <wbr> immediately before the extension.
• Use the heading level appropriate to the surrounding page structure. Table styles do not depend on a particular heading level.

PDF Embed Alignment Fix

Use this temporary CSS workaround to correct a Smart Sites alignment issue affecting embedded PDF Document components on sites using the default/narrow container width.

Issue

At viewport widths of 1200px and above, embedded PDF Document components may become horizontally misaligned with other page components. The same Document component displays correctly below 1200px.

Cause

The Smart Sites Document component contains nested .container elements. On the current OTC site configuration, Smart Sites sets these containers to width: 100% below 1200px. At 1200px and above, that rule no longer applies, allowing the nested Document containers to use the desktop container sizing instead.

This causes the PDF embed to shift out of alignment even though the component is correctly centered at smaller viewport widths.

Fix

The following rule restores width: 100% at 1200px and above only for Smart Sites Document components that contain an embedded PDF:

@media (min-width: 1200px) {
  div[id^="stack_content_"].container:has(.document_div_height .pdf-display-embed),
  div[id^="stack_content_"].container:has(.document_div_height .pdf-display-embed)
    .document_div_height > .ss-component-header.container,
  div[id^="stack_content_"].container:has(.document_div_height .pdf-display-embed)
    .document_div_height > .ss-component-content.container {
    width: 100% !important;
  }
}

How It Works

The selector looks for a Smart Sites stack_content_* container that contains both the Document component structure and an embedded PDF. It then sets the width of the Document stack, component header, and component content containers to 100%.

The rule does not manually reposition the PDF or change the site’s overall container width. It extends the correctly functioning container behavior used below 1200px into the desktop breakpoint where the alignment problem occurs.

Scope

• Applies only at viewport widths of 1200px and above.
• Applies only to stack_content_* containers containing .document_div_height .pdf-display-embed.
• Does not modify unrelated Smart Sites components or general site containers.
• Does not change existing component padding, margins, or responsive behavior.
• Allows OTC to retain the existing default/narrow site container setting rather than changing the entire site to the Widened setting.

Removal Process

When Smart Sites confirms that the native Document component fix has been deployed:

1. Test an affected PDF page with the custom workaround still in place.
2. Temporarily remove the workaround and verify that the PDF remains correctly aligned at viewport widths above and below 1200px.
3. If the native behavior is correct, remove the workaround from each page where it was installed.
4. Re-test the affected pages after removal to confirm there are no regressions or conflicts.

Usage Notes

• This is a temporary workaround for Smart Sites-generated Document component behavior rather than an OTC visual design pattern.
• Apply the workaround only to pages that currently require it.
• Keep track of every page where the workaround has been installed so it can be removed after the official Smart Sites fix is deployed.
• When comparing an embedded PDF with another component, make sure both components use compatible container, background, and content-containment settings. Breakout or uncontained components may intentionally be wider while still being correctly centered.
• If Smart Sites changes the Document component markup before the official fix is confirmed, re-test the selector before making further changes.

Status: Active temporary workaround
Platform: Smart Sites / ParentSquare
Added: August 2026
Removal trigger: Official Smart Sites PDF Document alignment fix deployed and verified