Maintenance Notification: WSB Wiki will be offline April 23rd between 8:00am - 10:00am for planned maintenance

Also known as: selector, picker, card with dropdown

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


BBA Career Pathways - initial view

Source: BBA Majors

Career Pathways - option selected


  • Displaying a large number of options (up to 15) with supporting content
  • Displaying a few options (at least 3) with varying amounts of supporting content

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

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

  • 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
  • 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
  • Dimensions: 2400x1600px (recommended, but we can work with other photo sizes here)
  • jpeg file
  • 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
  • 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 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.
  • These are standard sections for many of our custom blocks.
  • 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


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:

  • 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.


Image + Text 
<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>