Drupal HTML Crib Notes - NCIOCPL/cgov-digital-platform GitHub Wiki
Summary boxes (formerly known as callout boxes) are used within Article pages to highlight important information or to provide users with supplementary information that is related to main content your page. Summary boxes can be added through the source code option within a content block using the code snippets below.
A summary-box--full will extend the full width of your content. Use this type of summary box to highlight key information for users.
<div class="cgdp-embed-media-wrapper">
<div class="align-right embedded-entity cgdp-embed-summary-box cgdp-embed-summary-box--full">
<div class="usa-summary-box">
<div class="usa-summary-box__body">
<div class="usa-summary-box__heading">
[OPTIONAL: ADD TITLE HERE]
</div>
<div class="usa-prose usa-summary-box__text">
<p>
[ADD TEXT HERE]
</p>
</div>
</div>
</div>
</div>
</div> Example:
Use a summary-box--small for shorter pieces of content or call-to-actions.
A small summary box will align to the right or left of the text. Use this type of summary box to present users with supplementary information that is related to main content of the page.
Right-aligned Summary Box
<div class="cgdp-embed-media-wrapper">
<div class="align-right embedded-entity cgdp-embed-summary-box cgdp-embed-summary-box--small">
<div class="usa-summary-box">
<div class="usa-summary-box__body">
<div class="usa-summary-box__heading">
[OPTIONAL: ADD TITLE HERE]
</div>
<div class="usa-prose usa-summary-box__text">
<p>
[ADD TEXT HERE]
</p>
</div>
</div>
</div>
</div>
</div> Left-aligned Summary Box
<div class="cgdp-embed-media-wrapper">
<div class="align-left embedded-entity cgdp-embed-summary-box cgdp-embed-summary-box--small">
<div class="usa-summary-box">
<div class="usa-summary-box__body">
<div class="usa-summary-box__heading">
[OPTIONAL: ADD TITLE HERE]
</div>
<div class="usa-prose usa-summary-box__text">
<p>
[ADD TEXT HERE]
</p>
</div>
</div>
</div>
</div>
</div> Example:
pullquote--full
<div class="cgdp-embed-media-wrapper">
<div class="embedded-entity cgdp-embed-pullquote cgdp-embed-pullquote--full">
<div class="cgdp-pullquote">
<div class="cgdp-pullquote__container">
<p class="cgdp-pullquote__body">
[ADD TEXT HERE]
</p>
<p class="cgdp-pullquote__author">
[ADD TEXT HERE]
</p>
</div>
</div>
</div>
</div> Example:
pullquote--small align-right pullquote--small align-left
Right-aligned Pull Quote
<div class="cgdp-embed-media-wrapper">
<div class="embedded-entity cgdp-embed-pullquote cgdp-embed-pullquote--small align-right ">
<div class="cgdp-pullquote">
<div class="cgdp-pullquote__container">
<p class="cgdp-pullquote__body">
[ADD TEXT HERE]
</p>
<p class="cgdp-pullquote__author">
[ADD TEXT HERE]
</p>
</div>
</div>
</div>
</div> Left-aligned Pull Quote
<div class="cgdp-embed-media-wrapper">
<div class="embedded-entity cgdp-embed-pullquote cgdp-embed-pullquote--small align-left ">
<div class="cgdp-pullquote">
<div class="cgdp-pullquote__container">
<p class="cgdp-pullquote__body">
[ADD TEXT HERE]
</p>
<p class="cgdp-pullquote__author">
[ADD TEXT HERE]
</p>
</div>
</div>
</div>
</div> Example:
To account for measure on article pages, columns should be built on a 10-column grid. These 10 can be split between any number of columns - 5 and 5, for two even, 3 and 7 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
<div class="grid-row">
<div class="tablet:grid-col-5 usa-prose">
<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-5 usa-prose">
<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>
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>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>
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
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>
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>
If you want a column that has dates to be sortable,
-
Add the attribute
element.data-sortable-type="date"to the -
Ensure the format of the dates are MM/DD/YYYY
<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>
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.
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