Directory component

The “title” field is where to give the directory a title. This field is automatically bolded but H2 is recommended for this area to give the title importance.

A description or context for the directory can be added into the content field. This text will be displayed below the title and above the actual directory. The text can be styled as desired.

The accordion can have a background color of white, yellow, navy, grey, or charcoal. The color can be selected under the “background color” area.

“Content width” controls how wide the grid of cards is going to be.

• Default: This size is selected atomically and is set to fill a medium amount of space on the page.
• Large: If the cards begin to feel too cramped or the cards should be bigger, the “large” option will give more room to the card grid.

The “card columns” option determines the number of columns displayed in the directory. If there are a large number of people going to be shown, more columns is recommended.

To start adding content to the component click the “add item” button. Clicking “add item” will bring up two options.

• Staff Bio: Creates an informational card for a person in the department.
• Label: Creates a label for a group of people.

After choosing “staff bio” a lot of options will be presented to fill in the persons information. The “card type” option dictates how the whole card will be displayed.

• Staff: A staff card is the best option if adding a staff member. This is a straight forward card display that shows off the persons information.
• Feature: A feature card is a slightly different design. This option will visually separate someone from a group of people, similar to a headline feature.
• Lead: A lead card should go first in a list of people. This style sets the person to take up the whole width of the card grid and is generally the head of a department or group.

This option is what will determine the background of the card itself. The cards can match the background color of the whole component, or if a different color is chosen, they’ll stand out with a different color.

A persons picture can be added into the “bio image” area. This picture should be a 600px wide image with a square aspect ratio. If this is left blank, no image will be present, and the layout of the card will adjust accordingly.

The rest of the fields are all about adding in the persons information. This is as simple as adding the desired information about a person into the correct fields. Any of these fields can be left blank if they are not necessary to include.