Card

GitHub Source Link @nycopportunity/standard/src/components/card

Demonstration

Training to become a commercial driver

Red Hook on the Road by NYC Small Business Services (SBS)

Actively Recruiting Disability accommodation details are available. View this program to learn more.   Language access details are available. View this program to learn more.  

This program prepares unemployed New Yorkers to work as commercial drivers. For Adults, Low-income New Yorkers, Public assistance recipients, People with justice involvement.

  • Services Provided Training for a new job
  • Duration and Length 1 to less than 3 months. Daytime, Full-time
Learn more about Training to become a commercial driver
Code

Cards are thumbnails of content and may include a full or partial set of content-related elements. It reflects what would be seen in the Header of a singular content view. Further guidance on generic cards can be found on the U.S. Web Design System (USWDS) site. Cards may contain any of the following elements; title, subtitle, status, summary, feature list, call-to-action, or web share component.

Call-to-action; At a minimum, the card should have a title that links to the complete content the card describes. For mobile viewports, the call to action is invisible but covers the entire card, making the whole card tappable for mobile devices.

  • Internal or external; The call-to-action may link to either internal or external content. Internal content exists on the same website or domain name (including the subdomain). External content exists in an entirely separate domain.

  • New or current window; The call-to-action may refresh the existing window or open a new window (or tab). Internal content should generally open in the existing window, and external content may open in a new window. Test with users or follow the guidance from Nielson Norman Group on “Opening Links in New Browser Windows and Tabs.” Links that open in new tabs should have the appropriate target="_blank" and rel="nofollow noopener" attributes.

  • Link icons; Internal call-to-actions should use the directional arrow icon in the button element of the card. External call-to-actions should use the external link icon in the title and button element of the card.

  • Learn more about…; The call-to-action button label should be more descriptive for screen-readers than only including the text “Learn More.” Use a full sentence for the link that includes “Learn more” + the card title. For example, “Learn more about commercial driver training.” The card title can be hidden visually using the .sr-only CSS utility.

Program Card Anchor Link Program Card

GitHub Source Link @nycopportunity/standard/src/components/card

Cards containing program information in the Opportunity Standard are called “program cards.” These cards are designed to relate the most important information for users when scanning or comparing programs in a list. They contain one or more of the following types of information in this order;

The card title is the Plain language program name; a short, snappy title for the program that anyone can understand. Include specific outcome details and general categories (cash, food, work, or training, etc.), for example, “Commercial driver training” for Red Hook on the Road. Try to limit it to around 50 characters.

The card subtitle may contain any of the three following content.

  • Program title; The official name of the program, as designated by the agency or provider that administers it.

  • Agency; The agency or agencies that administers or funds the program. Write out the full name, followed by any acronyms, for example, “Small Business Services (SBS).” If there are two providers, list both separated by “and.” Use ampersands if “and” is in the title of the agency, for example, “Small Business Services (SBS) and Department of Youth & Community Development (DYCD).”

  • Provider; If one provider organization administers the program, it will be listed. If there is more than one provider, write “Multiple providers.”

The card status row may contain any of the three following elements.

  • The activity status badge appears if a program is active or accepting new participants. If a program is not active, it isn’t necessary to display this element. However, use a plain text label to make it easier to scan for other programs that are recruiting.

  • A disability information icon is displayed if the following information is available on the page the learn more button on the card links; a description of the accommodations the program makes for people with disabilities beyond the minimum physical accessibility requirements of the Americans with Disabilities Act (ADA). The disability icon is an svg element with its role attribute is set to img so that title tag of this icon is treated like alt text for images. It reads, “Disability accommodation details are available. View this program to learn more.”

  • A language information icon is displayed if the following information is available on the page the learn more button on the card links; a description of the program’s services in other languages, including the languages available. The translation icon is an svg element with its role attribute is set to img so that title tag of this icon is treated like alt text for images. It reads, “Language access details are available. View this program to learn more.”

The card summary may contain any of the following content.

  • One-sentence snippet; A simple, one-sentence overview of what the program does and who it serves. For example, “This four-week program prepares unemployed New Yorkers to work as commercial drivers.” Try to limit it to around 30 words.

  • Populations or who it serves; This is a general overview of who may be eligible, who the program seeks to serve, or has particular expertise. Its combined with the one-sentence snippet to create a short description.

The card feature list may contain any of the following content.

  • Services; These categories describe the main functions of a program. A program can include multiple services. The award icon prefix is an svg element with its role attribute is set to img so that title tag of this icon is treated like alt text for images. It reads, “Services Provided.”

  • Duration and Schedule; Duration categories describe different mutually exclusive ranges of how long the program lasts. Schedule categories describe when during a week a program occurs. A program can accommodate multiple schedules. The calendar icon prefix is an svg element with its role attribute set to img so that title tag of this icon is treated like alt text for images. It reads, “Duration and Length.”

The call-to-action is an internal link to complete program information.

Program Card with Icon Anchor Link Program Card with Icon

GitHub Source Link @nycopportunity/standard/src/components/card

Demonstration
Cash & Expenses

Money to buy food

Supplemental Nutrition Assistance Program (SNAP) by NYC Human Resources Administration (HRA)

SNAP benefits can help you feed your family with fresh and healthy groceries. For Everyone.

  • Services Provided Cash & Expenses, Food.
Learn more about Money to buy food
Code

Program cards may contain an icon in the card header that describes the services provided. The cash & expenses icon is an svg element with its role attribute set to img so that title tag of this icon is treated like alt text for images. It reads, “Cash & Expenses.”

The Opportunity Standard provides the following icons representing service categories for use with Program cards. The text for the title tag is provided along with the id for the use tag.

include{{ /elements/icons/icons-programs.slm }}

Transparent Cards Anchor Link Transparent Cards

GitHub Source Link @nycopportunity/standard/src/components/card

Demonstration
Code

Cards have an alternative transparent background display using the class .c-card-transparent.

Announcement Card Anchor Link Announcement Card

GitHub Source Link @nycopportunity/standard/src/components/card

Cards containing time-sensitive and non-standard information in the Opportunity Standard are called “announcement cards” (they may also be referred to as “touts”). They may contain one or more of the following types of information in this order; badge, title, summary, timestamp, and web share component.

Badge; a new announcement should include a badge labeled “new” to indicate timely information. The length of visibility for the badge can be adjusted but could be visible to users after the announcement is posted for 15 - 30 days.

The card title is the headline; This is the large, linked text that will appear above each announcement. It should be snappy and limited to 4–10 words. The title will be linked to the announcement source (call-to-action) or where users can find more information about the announcement’s subject. The link can be internal or external, including the external link icon.

The card summary contains the announcement details; A concise description of the announcement limited to one sentence (or two short sentences) and around 20 words.

The card feature list should contain the timestamp; The timestamp is the date and time the announcement was originally posted or last updated. The information icon prefix is an svg element with its role attribute set to img so that title tag of this icon is treated like alt text for images. It reads, “Last Updated.”

Web Share; The Web Share component should share and allow the user to copy the announcement source URL (call-to-action) to their clipboard. More guidance on the Web Share can be found here.