Drupal HTML Crib Notes - NCIOCPL/cgov-digital-platform GitHub Wiki

On This Page

Callout Boxes

Callout box, 100% width of container

callout-box-full

<div class="callout-box-full"> [optional heading tag] <p>TEXTGOESHERE</p> </div>

Callout box, 80% width of container

callout-box

<div class="callout-box"> [optional heading tag] <p>Text goes here. Use managed links when appropriate.</p> </div>

Callout box, 40% width of container, floated to right of content

callout-box-right

<div class="callout-box-right"> [optional heading tag] <p>Text goes here. Use managed links when appropriate.</p> </div>

Callout box, 40% width of container, floated to left of content

callout-box-left

<div class="callout-box-left"> [optional heading tag] <p>Text goes here. Use managed links when appropriate.</p> </div>

Pull Quotes

Pull quote, 100% width of content

pullquote

<div class="pullquote">
   <p class="pullquote-text">QUOTE TEXT HERE</p>
   <p class="author">AUTHOR HERE (optional)</p>
</div>

Pull quote, 40% width of content, floated to right of content

pullquote pullquote-right

<div class="pullquote pullquote-right">
   <p class="pullquote-text">QUOTE TEXT HERE</p>
   <p class="author">AUTHOR HERE (optional)</p>
</div>

Pull quote right example

Pullquote, 40% width of content, floated to left of content

pullquote pullquote-left

<div class="pullquote pullquote-left">
   <p class="pullquote-text">QUOTEHERE</p>
   <p class="author">AUTHOR HERE (optional)</p>
</div>

Pull Quote with an image

<div class="pullquote">
   <!--INSERT IMAGE HERE AS A LEFT MEDIUM IMAGE TEMPLATE -->    
   <p class="pullquote-text">QUOTEHERE</p>
</div>

Columns

Columns are built on a 12-column grid. These 12 can be split between any number of columns - 6 and 6, for two even, 2 and 10 for one narrow and one wide, etc.

NCIDS uses USWDS' flexible layout grid system. The grid is mobile-first, powered by flexbox, and based on a 12-column system. See how it works, including code examples: https://designsystem.cancer.gov/foundations/layout-positioning/layout-grid

Example (basic two column list of names)

<div class="grid-row">
<div class="tablet:grid-col">
<p><strong>Ruth C. Carlos, M.D.</strong><br />
University of Michigan<br />
Ann Arbor, MI</p>

<p><strong>Kathleen Castro, M.S., RN, AOCN</strong><br />
National Cancer Institute<br />
Bethesda, MD</p>

<p><strong>Ronald C. Chen, M.D., M.P.H.</strong><br />
University of Kansas Medical Center<br />
Kansas City, KS</p>

<p><strong>Mary E. Cooley, Ph.D., RN, FAAN</strong><br />
Dana-Farber Cancer Institute<br />
Boston, MA</p>
</div>

<div class="tablet:grid-col">
<p><strong>Heather B. Neuman, M.D., M.S., FACS</strong><br />
University of Wisconsin<br />
Madison, WI</p>

<p><strong>Chandylen Nightingale, Ph.D., M.P.H.</strong><br />
Wake Forest University School of Medicine<br />
Winston-Salem, NC</p>

<p><strong>Elyse R. Park, Ph.D.</strong><br />
Massachusetts General Hospital<br />
Boston, MA</p>

<p><strong>Susan K. Parsons, M.D., M.R.P.</strong><br />
Tufts University Medical Center<br />
Boston, MA</p>
</div>
</div>
Screenshot 2025-04-17 at 4 01 37 PM

Tables

Note that all tables should include headers, and in general no header should be empty, for accessibility reasons.

  • The <tfoot> tag and everything inside of it is not a mandatory field for accessibility. The <tfoot> element defines a set of rows summarizing the table.

  • If a table does have a footer (and it should always remain at the bottom of the table), it should be placed within the <tfoot> tag. This is necessary for sortable tables—it keeps the footer element anchored to the bottom of the table and not moving around as a user filters.

  • The <caption> tag can be either at the beginning (as in the example) or at the end (before </table>). The content inside of it should be the table title, if there is one (otherwise, omit the <caption> tag entirely).

  • This type of table can be seen on Most Recent Fiscal Year Budget page

<table class="table-default">
   <caption>TABLE TITLE (OPTIONAL)</caption>
   <thead>
      <tr>
         <th scope="col">HEADER 1</th>
         <th scope="col">HEADER 2</th>
         <th scope="col">HEADER 3</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Row 1, Cell 1</td>
         <td>Row 1, Cell 2</td>
         <td>Row 1, Cell 3</td>
      </tr>
      <tr>
         <td>Row 2, Cell 1</td>
         <td>Row 2, Cell 2</td>
         <td>Row 2, Cell 3</td>
      </tr>
      ... 
   </tbody>
   <tfoot>
      <tr>
         <td>Footer 1 (OPTIONAL)</td>
         <td>Footer 2 (OPTIONAL)</td>
         <td>Footer 3 (OPTIONAL)</td>
      </tr>
      ... 
   </tfoot>
</table>

Table with Footer

This table also includes styling in the markup to center-align the table headers and right-align numerical values. This allows for easy comparison of the numbers' magnitudes.

<table class="table-default">
   <caption>Management Fund & SSF Subtotals<br><small><i>(Whole Dollars)</i></small></caption>
   <thead>
      <tr>
         <th scope="col" style="text-align: center; vertical-align: middle;">Type</th>
         <th scope="col" style="text-align: center; vertical-align: middle;">Amount</th>
         <th scope="col" style="text-align: center; vertical-align: middle;">Percent</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>NCI</td>
         <td class="text-right">$357,722,353</td>
         <td class="text-right">16.6%</td>
      </tr>
      <tr>
         <td>Other NIH Institutes</td>
         <td class="text-right">1,444,405,600</td>
         <td class="text-right">83.4%</td>
      </tr>
   </tbody>
   <tfoot>
      <tr>
         <td>Total NIH MFUND</td>
         <td class="text-right">$1,802,127,953</td>
         <td class="text-right">100%</td>
      </tr>
   </tfoot>
</table>

Example table with footer

Merging Rows (row span)

To merge rows, add rowspan=# on the appropriate <td>. You will only have one <td rowspan ="#"> for all those merged.

<table class="table-default complex-table">
   <caption>Fiscal Year 2014 Budget</caption>
   <thead>
      <tr>
         <th scope="col">Actual Obligations Resulting From Appropriated Funds</th>
         <th scope="col">"FY 2014 Dollar Amount"<br>"(Whole Dollars)"</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td rowspan="3">"FY 2014 Appropriation"<br>"(Continuing Resolution)"</td>
         <td>$4,923,238,000</td>
      </tr>
      <tr>
         <td>-12,359,000</td>
      </tr>
      <tr>
         <td>-965,000</td>
      </tr>
      <tr>
         <td>Transfer from National Children's Study</td>
         <td>16,180,552</td>
      </tr>
      ...		 
   </tbody>
</table>

! Example table with merged rows

Sortable Tables

A sortable table is initiated when the data-sortable attribute is added to the <table> element. Multiple tables on a page can be sortable. By default, the data-sortable attribute will add sort icons to all of the table's column headers.

Note that sortable tables should follow the table guidelines listed above, and there should be no inline styles placed within table elements.

<table data-sortable class="table-default complex-table">
   <caption>NCI Personnel, FY 2008-2017</caption>
   <thead>
      <tr>
         <th scope="col">Fiscal Year</th>
         <th scope="col">Full Time Permanent</th>
         <th scope="col">Other Than Full Time Permanent</th>
         <th scope="col">Training Fellows</th>
         <th scope="col">Total Personnel Resources</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>2008</td>
         <td>2,075</td>
         <td>920</td>
         <td>1,016</td>
         <td>4,011</td>
      </tr>
      <tr>
         <td>2009</td>
         <td>2,118</td>
         <td>959</td>
         <td>1,058</td>
         <td>4,135</td>
      </tr>
   </tbody>
</table>

! Example sortable table

No Sort/Fixed Column

If you want to prevent a single column in a sortable table from being sorted, add the attribute data-fixed to the <th> element. This column will not sort, nor will the icon show in that column.

<table data-sortable class="table-default complex-table">
   <caption>Open Funding Opportunity Announcements (FOA)</caption>
   <thead>
      <tr>
         <th scope="col">BRP Recommendation</th>
         <th data-fixed scope="col">Title</th>
         <th scope="col">Announcement Number</th>
         <th scope="col" data-sortable-type="date">Opening Date</th>
         <th scope="col">Expiration Date</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Cancer Immunotherapy Translational Science Network</td>
         <td>Research Projects to Enhance Applicability of Mammalian... Models for Translational Research (R01)</td>
         <td><a title="PAR-17-245" href="https://grants.nih.gov/grants/guide/pa-files/PAR-17-245.html">PAR-17-245</a></td>
         <td>5/5/2017</td>
         <td>5/8/2020</td>
      </tr>
      <tr>
         <td>Cancer Immunotherapy Translational Science Network</td>
         <td>Collaborative Research Projects to Enhance Applicability of Mammalian Models for Translational Research (Collaborative R01)</td>
         <td><a title="PAR-17-244" href="https://grants.nih.gov/grants/guide/pa-files/PAR-17-244.html">PAR-17-244</a></td>
         <td>5/5/2017</td>
         <td>5/8/2020</td>
      </tr>
   </tbody>
</table>

Sortable table missing icon

Dates

If you want a column that has dates to be sortable,

  1. Add the attribute data-sortable-type="date"to the

    element.

  2. Ensure the format of the dates are MM/DD/YYYY

    3. <table data-sortable class="table-default complex-table">
   <caption>Open Funding Opportunity Announcements (FOA)</caption>
   <thead>
      <tr>
         <th scope="col">BRP Recommendation</th>
         <th scope="col">Title</th>
         <th scope="col">Announcement Number</th>
         <th scope="col" data-sortable-type="date">Opening Date</th>
         <th scope="col">Expiration Date</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Cancer Immunotherapy Translational Science Network</td>
         <td>Research Projects to Enhance Applicability of Mammalian... Models for Translational Research (R01)</td>
         <td><a title="PAR-17-245" href="https://grants.nih.gov/grants/guide/pa-files/PAR-17-245.html">PAR-17-245</a></td>
         <td>5/5/2017</td>
         <td>5/8/2020</td>
      </tr>
      <tr>
         <td>Cancer Immunotherapy Translational Science Network</td>
         <td>Collaborative Research Projects to Enhance Applicability of Mammalian Models for Translational Research (Collaborative R01)</td>
         <td><a title="PAR-17-244" href="https://grants.nih.gov/grants/guide/pa-files/PAR-17-244.html">PAR-17-244</a></td>
         <td>5/5/2017</td>
         <td>5/8/2020</td>
      </tr>
   </tbody>
</table>

    Table sorted by date

    Sort Order

    Alphanumeric data will be sorted in the following order: special characters, numbers, lowercase letter, uppercase letters. Expected special character sorting order for alpahnumeric data can be found here (there may be variation across locale): Special-character-sort.rtf.

    Data Types

    Do not mix data types in sortable columns. Sortable columns must be either 1) numbers only (may use special characters “$” and “,”), 2) dates only, or 3) alphanumeric strings with our without special characters

⚠️ **GitHub.com Fallback** ⚠️