Directory
Directory options
Title
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.
Content
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.
Background color
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
“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.
Card columns
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.
Adding content
Add item
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.
Card Type
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.
Staff Card Background
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.
Bio Image
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.
Persons Info
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.
Example directory
This is an example of a three column directory component with one lead person and three staff people.
