Page History

...

Design

Use When

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

...

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

Image Added

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:
• Other details to note (e.g. keep faces vertically centered)

Photo B (required/optional)

• 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
• Dimensions:
Other details

Implementation

ACF Fields

Add/Edit Content

...

• 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 and . See code templates below.

Introduction and Footer sections

...

• 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 , medium-dark, 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

...

<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 (link)