General Microformats

Alert Banner

Requires a nypl-full-width-wrapper for proper margin and padding (See: Layout).

.nypl-banner-alert
.nypl-full-width-wrapper
    

<div class="nypl-banner-alert">
  <div class="nypl-full-width-wrapper">
    The New York Public Library will be closed on Monday, October 10
    in observance of Columbus Day.
  </div>
</div>
    

Progress Indicator

For situations where patrons are completing a multi-step process like registering for a library card, use a p tag of this class.

.nypl-progress-indicator
    

<p class="nypl-progress-indicator">Step 1 of 3</p>
    

Location Card

Note the classes for each property.

.nypl-location-info
.nypl-room
.nypl-contact
.nypl-access
    

<div class="nypl-location-info">
  <p class="nypl-room">First Floor, Room 100</p>
  <p class="nypl-contact">Phone: (212) 642-0139 | Fax: (212) 930-0838</p>
  <p class="nypl-access">Fully accessible to wheelchairs</p>
</div>
    

Location Hours

Follow general rules for tables and make sure it always starts on Monday. The current day should include a nypl-current class (Tuesday in this case) and use line breaks to separate opening and closing hours to allow for better wrapping in smaller screens.

.nypl-location-hours
.nypl-current
    

<table class="nypl-location-hours">
  <thead>
    <tr>
      <th scope="col">Monday</th>
      <th scope="col" class="nypl-current">Tuesday</th>
      <th scope="col">Wednesday</th>
      <th scope="col">Thursday</th>
      <th scope="col">Friday</th>
      <th scope="col">Saturday</th>
      <th scope="col">Sunday</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10:00 AM - <br />5:45 PM</td>
      <td class="nypl-current">10:00 AM - <br />7:45 PM</td>
      <td>10:00 AM - <br />7:45 PM</td>
      <td>10:00 AM - <br />5:45 PM</td>
      <td>10:00 AM - <br />5:45 PM</td>
      <td>10:00 AM - <br />5:45 PM</td>
      <td>1:00 PM - <br />4:45 PM</td>
    </tr>
  </tbody>
</table>
    

Related Links

To be used for displaying related content to the current content. Should be placed after the main content, in its own row.

NOTE: Make sure to preserve the whitespacing or column offset of the main content (see example below).

.nypl-related-links
    

<div class="nypl-row">
  <div class="nypl-column-three-quarters nypl-column-offset-one">
    <h3>Main content here</h3>
    <p>With some content that is offset one column from the left.</p>
  </div>
</div>
<div class="nypl-row">
  <div class="nypl-related-links nypl-column-three-quarters nypl-column-offset-one">
    <h2>Related links</h2>
  </div>
  <div class="nypl-column-one-quarter nypl-column-offset-one">
    One column of related content.
  </div>
  <div class="nypl-column-one-quarter">
    Another column of related content.
  </div>
  <div class="nypl-column-one-quarter">
    A third column of related content. Note that this is aligned with the main content.
  </div>
</div>
    

Images Combined with Text Modules

To be used in cases where imagery, headings and text are combined or “locked-up” into a singular unit.

This folowing example covers the visual design requirement on the Research Home page where a 1/4 column containing an img is aligned horizontally next to 3/4 column containing one h4 and description text wrapped in a p tag. Further expansion of this type of pattern will be developed as needed.

Accessibility note: The image’s alt tag should, at bare minimum be left blank (alt=""), but ideally the text should be contextually relevant, informative and suplement the associated with headline and body copy of the module itself.

Example

Collections

Discover our world-renowned research collections, featuring more than 46 million items.

.nypl-quarter-image
  

<div class="nypl-row">
<div class="nypl-column-one-quarter">
<img class="nypl-quarter-image" src="https://d2720ur5668dri.cloudfront.net/sites/default/files/styles/extralarge/public/archives-portal.jpg?itok=-oYtHmeO" alt="" role="img" />
</div>
<div class="nypl-column-three-quarters">
<h4><a href="#">Collections</a></h4>
<p>Discover our world-renowned research collections, featuring more than 46 million items.</p>
</div>
</div>
  

Simple Modal

The following describes the usage of modals (popups).

Accessibility note: In order for a modal to be fully accessible, the right html attributes and javascript behaviors must be in place. Key to a modal’s operabiltiy is to afford the user the use of the escape key on their keyboard and implement a graphical method of closure via a close button or link. Aria attributes must also being in place and toggle properly between respective states. The example below demonstrates a few key points. The intial landmark, which should be a <h3>, (in this case <strong> to keep this document functional) must recieve focus when the modal is activated, this landmark will help assitive technologies orient the user.

The modal’s container should recive the following attributes:

• role="dialog"
• aria-labelledby="modal-title"
• aria-describedby="modal-description"
• A brief statement receiving the class="screenreader-only"

.nypl-basic-modal-container
  

<div class="nypl-basic-modal-container inactive" role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description">
  <div class="nypl-modal-content">
    <p id="modal-description" class="nypl-screenreader-only">A brief statement about what the modal&rsquo;s purpose</p>
    <strong id="modal-title">The modal&rsquo;s heading here.</strong>
    <p>The visual style portayed here is not neccessarily the final style, it is only for demonstration purpose. The modal should always have a close button and utilize the escape key to close / exit the modal.</p>
    <button type="button" class="nypl-x-close-button" id="closeModal" type="button" name="Close-Filters" aria-expanded="false" aria-controls="modal-content">
      <span>Close</span>
      <svg aria-hidden="true" aria-controls="nypl-dialog-or-modal" class="nypl-icon" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" aria-labelledby="x-close-modal">
        <title id="x-close-modal">x-close-rev</title>
        <path d="M82.07922,14.06287a48.0713,48.0713,0,1,0,0,68.01563A48.15148,48.15148,0,0,0,82.07922,14.06287ZM65.06232,60.84845A2.97437,2.97437,0,1,1,60.827,65.0257L48.154,52.18756,35.30133,65.04022a2.97432,2.97432,0,1,1-4.20636-4.2063L43.97473,47.95416,31.27362,35.08746A2.97542,2.97542,0,0,1,35.509,30.90729L48.18213,43.7467,60.84149,31.0874a2.97432,2.97432,0,0,1,4.2063,4.20636L52.36108,47.98047Z"/>
      </svg>
    </button>
  </div>
  <div class="nypl-modal-underlay"></div>
  

    // Basic JS Modal
    // Get the Underlay
    var underlay = document.querySelector('.nypl-modal-underlay');

    // Get the modal contents
    var modal = document.querySelector('.nypl-basic-modal-container');

    // Get the button that opens the modal
    var openModalButton = document.querySelector('#filterButton');

    // Get the element that closes the modal
    var closeTheModal = document.querySelector('#closeModal');

    // Get the cancel button that closes the modal
    var cancelTheModal = document.querySelector('#cancelFiltering');

    openModalButton.addEventListener('click', function() {
      modal.classList.remove('inactive');
      modal.classList.add('active');
      openModalButton.setAttribute("aria-expanded", true)
    });

    // When the user clicks on the close button, close the modal
    closeTheModal.addEventListener('click', function() {
      modal.classList.remove('active');
      modal.classList.add('inactive');
      openModalButton.setAttribute("aria-expanded", false);
    });