Also known as: selector, picker, card with dropdown

Description

A block with a dropdown selector which allows the user to select a topic and see more details appear in the card below.

Design

Use When

• Displaying a large number of options (up to 15) with supporting content
  • Example: Popular career pathways on the BBA Majors page
• Displaying a few options (at least 3) with varying amounts of supporting content

Editorial Guidelines

Follow our general Web Copy General Guidelines in addition to the following:

Dropdown items

• The options displayed in the dropdown when the user opens it
• 30 characters max  for each item
• 3-15 items total

Supporting content (card content for each dropdown item)

• The details about each dropdown item that will go inside the card
• No exact character limit, but keep the length within reason. This content could include a short paragraph or bulleted list.
• Follow web best practices for keeping content easy to digest and scannable
  • Use bulleted lists and subheads when appropriate
• We can include a variety of content here, such as:
  • headings/subheadings
  • sentences/phrases
  • bulleted lists
  • supporting images

Placeholder content (optional)

• Content that will appear in the dropdown and the card when the page is first loaded, before the user has interacted with the dropdown. 
• Serves as instructions to help the user understand what to do. If 
• Examples:
  • Dropdown placeholder text - "Select an option", "Select a career path"
  • Supporting content/card placeholder text - "Select an option to see more details", "Select a career path to see recommended majors and certificates."
• If this context is not necessary, we can opt to display the first dropdown item and its supporting details when the page is loaded

Design Assets Needed

Images

Supporting images (optional)

• Dimensions: 2400x1600px (recommended, but we can work with other photo sizes here)
• jpeg file

Custom background pattern

• Use sparingly; recommend using the dimensional gray lines pattern already built into this block (example: BBA Majors)
• Only use subtle, light-colored patterns for this block since there is a fade to white gradient overlay at the bottom and bold/dark patterns don't look as good with this
• svg file

Implementation

ACF Fields

Add/Edit Content

Disable first item in dropdown? 

• Switch to Yes if your first dropdown item acts as a placeholder or label telling the user what to do 
• Leave at No if your first dropdown item is an actual choice the user might select 

Dropdown content (repeater)

• Dropdown item - the text that will go inside the dropdown
  • Ideal character limit: 30 characters (all characters should be visible on mobile)
  • True character limit: 40 characters
• Supporting content - details about the dropdown item that will go inside the card
  • This is a WYSIWYG field. Add content inside HTML tags. See code templates below.

Introduction and Footer sections

• These are standard sections for many of our custom blocks.

Configuration

• Background pattern - choose or upload a background pattern
  • Recommend only using light background patterns with this block. There is a fade to white gradient overlay for all background patterns and this effect can look jarring with bold or dark colored backgrounds.
    • Make sure to communicate this with a designer if they plan to create a pattern for use in this block.
  •  Options:
    • None (default value)
    • Dimensional lines - light
    • Custom pattern (upload svg to media library)
• Text color - choose the color for the text in the intro section 
  • Conditional field (custom background pattern must be selected above)
  • This field should be used rarely, since it is strongly recommended to only use light bg patterns in this block.
  •  Options:
    • Default - uses our default web font colors
    • Dark - makes all text dark gray for contrast with 
    • White - makes the intro copy white for better contrast with a custom bg pattern
• Custom background pattern - image field
• Block wrapper class(es) - common field for styling our custom blocks

Code Templates for Card Content

Supporting content is added in a WYSIWYG field, so you'll need to add HTML elements with classes for styling. Copy the code below for the content you need:

Image + Text (2 column flexbox layout, responsive)

• Use if you want an image next to some text. Columns will stack for small screens and down.
• Where it says <img />, either 
  • Use the Add Media button and find the photo in the media library, then add classes from image in code snippet below
  • Or copy the HTML for the image below and add the image URL and alt text yourself.
• Make sure to include <p> tags around any text that isn't inside another element.

<div class="d-md-flex flex-md-row">
    <div class="flex-md-fill mb-5 mb-md-0">
        <h3>Subhead</h3>
        <p class="lead">Large copy</p>
		<p>Normal copy</p>

        <h3 class="mt-4">Subhead</h3>
        <span class="lead"><a href="#">Link</a>, <a href="#">Link</a>, or <a href="#">Link</a></span>
    </div>

    <div class="flex-md-shrink-0 ps-md-5" style="flex-basis: 50%;">
        <img src="#" alt="ADD ALT TEXT HERE" class="img-fluid brand-border-radius" />
    </div>
</div>

Resources

• Figma mockup