Staff profiles
Option 1: Staff Grid with Photos
If you want to include profile photos, use the Bootstrap Grid layout (the one below is 33%/66% with multiple bootstrap grids stacked on top of one another) with the "profile" photo size. This keeps all images consistent and formatted neatly. Pair each photo with the staff member’s name, title, and contact details to create a clean, accessible grid that looks good on any device. If a photo is not provided, the standard “no image” placeholder icon (available in the Box folder) must be used.
Full name (bold, paragraph styling)
Title
Phone: XXX-XXX-XXXX
Email: example@ucanr.edu
Full name (bold, paragraph styling)
Title
Phone: XXX-XXX-XXXX
Email: example@ucanr.edu
Full name (bold, paragraph styling)
Title
Phone: XXX-XXX-XXXX
Email: example@ucanr.edu
Full name (bold, paragraph styling)
Title
Phone: XXX-XXX-XXXX
Email: example@ucanr.edu
Full name (bold, paragraph styling)
Title
Phone: XXX-XXX-XXXX
Email: example@ucanr.edu
Option 2: Staff List without Photos
If you have many staff or do not plan to include photos, use a simple list or table format. There are no default table styles, so after inserting a table you will need to apply styles in CKEditor (for example, adding stripes on every other row) to make it easier to read. This approach keeps the focus on names, titles, and contact details while ensuring accessibility across all devices.
| Name | Title | Phone Number | |
| Last, First | sample@ucanr.edu | XXX-XXX-XXXX | |
| Last, First | sample@ucanr.edu | XXX-XXX-XXXX | |
| Last, First | sample@ucanr.edu | XXX-XXX-XXXX | |
| Last, First | sample@ucanr.edu | XXX-XXX-XXXX | |
| Last, First | sample@ucanr.edu | XXX-XXX-XXXX |
Displaying Social Media Links in Your Pages
If your group or site has official social media accounts, there is a ready-made Social Media content type you can use. When you add your account links here, the system will automatically display them as clickable icons just below your site’s main navigation. This keeps your links looking consistent and professional without any extra design work.
For step-by-step instructions on adding and managing this content type, see the guidance on the IWP Training Site.
Linking to Program-Specific or Additional Channels
Sometimes a program within a larger group or site may want to highlight its own social media channels, or you may need to link to platforms that aren’t included in the default set of group icons. In these cases, adding links directly within your page content is an option.
Tip: Put links near the bottom of the page so they support the content without distracting from it
Option 1: Simple List (no icons)
This option is good for keeping things clean and easy to scan.
How to do it in the editor:
- Type the platform names in a list (one per line).
- Highlight each name (e.g., “Facebook”) and use the Insert Link option in the editor toolbar to add the correct URL.
Example:
Follow us on social media:
Or, if you’d like it inline (still accessible and easy to scan):
Follow us on social media: Facebook | Instagram | YouTube
Option 2: Horizontal Row with Icons (Coming Soon)
We’re working on adding a feature that will let you display your social media links with icons in a consistent, accessible way. We hope to make this available soon.
In the meantime:
Please do not use icon images in the main content area. Use only the text version shown in Option 1 to link to your accounts. This ensures accessibility and keeps the design consistent across the site.