Seramount Custom Blocks
This page was created to make QA testing for multiple Jira tickets easier by bringing several updates together in one location.
Ticket SERR-78 includes a check list for all of the custom blocks listed below. These blocks were originally built for Seramount and are here to confirm they display correctly in the new site design.
The goal is to maintain backward compatibility while determining if some of these components could be rebuilt using patterns, which would make it easier to manage and customize without additional coding.
- Callout Link
- Topic List
- Event 3 Card Block Filtered By Type
- Event 3 Card Block Showing One of Each Type
- Events
- Conference
- Heritage Month
- Featured Post
- Research and Insights Cards
- Research and Insights Contents
- Employees
- Stylized Content Group
- Call to Action
- Seramount Button
- Seramount H2
Callout Link custom block
QA NOTE: The below is a custom block called “Callout link” which you can see on an existing page here. I find this block difficult to use in the editor since you have to edit text fields and not inside the WYSIWYG and could be replaced with a pattern but it is used 6 times so we have updated it to make sure it looks good here.
Topic List custom block
QA NOTE: This is used on the R & I page and a few other places. You can choose topics in the editor if you want.
Event 3 Card Block Filtered By Type custom block
QA NOTE: This is clumsy to use in the editor but it gets the job done which you can see on the events page which is the only place it is being used.
DBP Member Events & Webinars
If your organization is a DBP member, you have access to all member resources on Seramount.com.
Event 3 Card Block Showing One of Each Type custom block
QA NOTE: Helpful block with dividers to show one of each use on the events page.
Event list view custom block
QA NOTE: Helpful block used only on the R & I page at the bottom.
Events List View Heading Option
Conference Card custom block
QA NOTE: This block is used once on the R & I page and is also clunky to use in the editor, but it gets the job done.
Conferences
Seramount’s conferences build DEI and leadership competencies at every level with programming designed to facilitate engagement, learning, conversation and community.
Heritage Month custom block
QA NOTE: This is a clunky block to use in the editor and is only used on the Holiday Calendar page. But it get’s the job done and has been updated.
Here you have the flexibility to put any amount of blocks here.
Featured Post custom block
QA NOTE: A very helpful block to pick content and show it well. We have updated the editor to allow for changing how the image is displayed to handle different ratios. We have also updated the editor to not query for media making it easier to use. You can see these being used on the R & I page.
Research and Insights Cards custom block
QA NOTE: This is a little clumsy to use in the editor since it’s a “tag” like selection to pick the contents.
Research and Insights Contents custom block
QA NOTE: This block makes it easy to pick content and display it as cards and is relatively easy to use.
Employee List View
QA NOTE: Helpful block to list Person’s used on the Meet the Team page and can be used (like below) to select specific people.
Director, Digital Marketing and Marketing Operations
Head of Marketing and Events
Director of Corporate Programs
Senior Vice President & Chief Inclusion Officer
Vice President
ASL Artist, Choreographer, Director, Dancer, Actor, Acrobat, and Activist
Stylized Content Group custom block
QA NOTE: This custom block is used quite a lot to enforce a width on the content inside it. Really this custom block can be done with a “Group” block and then styled to fit. But since this design is not really used in the new design, we have made this custom block fit with the rest of the page layout. Additionally, the editing experience is a little werid since it’s not clear whatyou can control with the stylized content group, which doesn’t have all the regular styling options as a regular block. You can see it being used at the top of this page where it should just look like regular content. Moving forward, this block should not be used in favor of patterns or regular blocks which avoids having to make coding changes if things don’t look right.
This is a header inside the stylized content.
This is a paragraph inside it.
Call to Action custom block
QA NOTE: This block is also used a lot and is helpful. But this block could easily be built in a pattern which makes it easier to use and customize in the outlier case. However, since it is used a lot, we have made the custom block look like the new design, focusing on a dark and light option. You can see a page that has this custom block already on it with the new design implemented for it on this page. The reason I advocate for this as a pattern is mostly the editing experience.
This is the “Gray” style CTA
Some more text here
This is the “Purple” Option
Some more text here
Seramount Button custom block
QA NOTE: Used in a lot of places. Some in content added by an author, and others inside other blocks or templates that are behind the wscenes.
Seramount H2 custom block
QA NOTE: Another custom block that is used a lot. We have built this into a pattern to be used in the future, but this custom block should look the same. You can see it in use here. The reason I think this should be done as a pattern is the editing experience which is not really WYSIWYG.
Main Heading Would Be Here
