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

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Next »

Design

Card with full-width or circle headshot images that can open into a modal for more information. There are options for 1, 2, or 3 columns. 

There is an open modal button on the lower right corner of the cards that can be a stretch link. There are two modal close buttons in the modal popups (upper right corner and bottom right corner).

Examples of full-width and headshot modal cards and 1, 2, 3 columns

 


Modal for full-width cards. The header will be 50/50 for desktop and tablet, and full-width for mobile.

     

Modal for headshot. This will be the same in desktop, tablet, and mobile.

Use Cases

Use when you want to share a lot of information in a modal. Think of it as a story, you have the name and title in the card with the story in the modal.

Fields

  • Card section

    • Name - person's name and parenthesis for graduation program and year
    • Title - limited to 75 characters
    • Card Image - you can use the standard image size of 2400x1600px for horizontal images. You can use vertical images as well to make the cards vertical, but you will need a horizontal image for the modal.
    • Crop image to circle? - use for headshot images

  • Modal Popup section

    • Modal Title Override - can override the card title. This can have more characters, but it's still best practice to keep the title short.
    • Supporting Details - WYSIWYG for job titles, company, or majors
    • Modal Image Override - you can override the full width image used in the card section
    • Modal Text - WYSIWYG for modal copy. You will need to use inline classes and HTML for styles.
      • Modal code template - copy and paste into WYSIWYG field, then modify to fit your content

      • Add copy here

        <figure class="wp-block-pullquote mx-0 my-4 text-start">
            <p class="fs-5">add quote here</p>
        </figure>

        Add copy here

        <hr class="hr-gray my-5" />

        <h3 class="microtitle mb-3"><img class="microtitle-arrow" src="/wp-content/uploads/2024/10/Two-toned-yellow-arrow-digital-100x164-1.png" width="9" height="15" aria-hidden="true" /> Subheading</h3>

        Add copy here
         
        <figure class="wp-block-pullquote m-0 text-start">
            <p class="fs-5">Add quote here</p>
        </figure>

  • Configuration section

    • Number of columns - you can select one, two, or three columns. Three columns is the default.
      • Please note that headshot should only be used with two and three columns.
    • Stretch link? - this will make the modal open when a user selects anywhere on the card. Checked is the default.

  • Introduction and Footer sections

    • These are standard sections for all the cards.
  • No labels