| Accordion list |
Yes |
Accordion list |
No |
Same accordion list is used in V6 |
|
| Accordions |
Yes |
Accordion |
Yes |
V6 Accordion is using different code. The old v5.5 accordion code is deprecated. |
accordion
collapsed
panel-collapse |
| Alert banner |
Yes |
Alert |
No |
Very similar alert is used in v6. Legacy color classes such as alert-success, alert-info, alert-danger, alert-severe are still in the core css file. |
|
| Animations |
No |
|
Yes |
Animation functionality was removed because it was simply cool widget and not based on research. Also, it was removed because it was jQuery widget and we didn't have vanilla JS alternative. |
animated
animate-bounceInLeft
animate-bounceInRight
animate-bounceInUp
animate-fadeInLeft
animate-fadeInRight
animate-fadeInUp
animate-slideInLeft
animate-slideInRight
animate-pulse
animate-shake |
| Blockquotes |
Yes |
Blockquote |
No |
Similar blockquote component is used in v6. There are more component variations added in V6. Some of the features from legacy's Testimonials component were also incorporated. |
|
| Branding (structure) |
Yes |
Site header |
No |
Same branding component is part of the v6 |
|
| Buttons |
Yes |
Button |
No |
Legacy and v6 buttons are pretty much the same, except v6 buttons were simplified and standardized. |
btn-hover |
| Cards |
Yes |
Card |
No |
Animation functionality was removed because it was simply cool widget and not based on research. Also, it was removed because it was jQuery widget and there was no vanilla JS alternative. |
panel
panel-body
panel-heading
panel-header |
| Carousels and slideshows |
No |
|
Yes |
Carousels and slideshow were discontinued in v6. One of the reason was that using those components was not the best UX practice according to multiple UX and content design researches. Second reason was that they are very challenging components to keep and maintain from accessibility standpoint. And the third reason is that carousel and slider components were using jQuery. Once we have removed jQuery from State Web Template codebase there were no viable vanilla JS alternative that would have the same functionality and would be accessible. |
carousel
owl-carousel
carousel-content
content-container
item
carousel-video
owl-video
header-slideshow-banner
carousel-banner
slide |
| Contact Widgets (Supports Microdata) |
No |
Card |
Yes |
Contact widget was deprecated because it is pretty much contact info text (header and with paragraph). <br>It is up to department to decide how they want to format their contact text. |
|
| Countdown |
Yes |
Countdown timer |
No |
Same countdown code is used in v6 |
|
| Course Detail (Card) (Supports Microdata) |
No |
Card / Article |
Yes |
Course details (Card) was deprecated because it's not essential and commonly used item. Card and news article can be used as course details card replacement, if necessary. |
course-detail
header
description
presenter
location |
| Course Detail (Supports Microdata) |
No |
Article |
Yes |
Course details was deprecated because it's not essential and commonly used item. News article pattern can be used as course details replacement, if necessary. |
course-detail
header
description
presenter
location |
| Course List (Supports Microdata) |
No |
News list |
Yes |
Course list was deprecated because it's not essential and commonly used item. News list pattern can be used as course list replacement, if necessary. |
course-list
course-item
thumbnail (optional)
title
datetime
description
location |
| CSS Classes Shortcuts |
Yes |
CSS classes shortcuts |
No |
Same css shortcuts are in v6 |
|
| Event Detail (Supports Microdata) |
No |
Article |
Yes |
Event details was deprecated because it was too specific component and was used only to describe events. in this case more universal and flexible component such as news article can be used as a replacement. |
event-detail
header
description
presenter
presenter-name |
| Event List (Supports Microdata) |
No |
News list |
Yes |
Event list was deprecated because there was a need to rethink and redesign event list standards based on the new design system UA/UX trends and research. Before new events list pattern is introduced the news list pattern can be used as event list replacement |
event-list
event-item
title
thumbnail
start-date
info |
| Exam List |
No |
News list |
Yes |
Exam list was deprecated because it was too specific component and was used only to list state exams. In this case more universal and flexible component such as news list can be used as a replacement. |
exam-list
exam-item
header
body
footer |
| Featured Narrative |
No |
|
Yes |
Featured narrative discontinued because it is just content styles. It doesn't have to be a component. Same content treatment can be achieved by using State Web Template utility classes. |
featured-narrative |
| Figure with Captions (Supports Microdata) |
No |
Card with image, img tag |
Yes |
This sample was discontinued in v6 because these are common HTML tags that are conventionally used for images and image description. Nothing special about these example |
|
| Flex Megamenu Navigation |
Yes |
Megamenu |
No |
Same megamenu available in v6 |
|
| Footer (structure) |
Yes |
Footer |
No |
Very similar footer exists in v6. |
|
| Forms |
Yes |
Forms elements |
No |
V6 form elements were standardized and simplified. |
|
| Full Width Navigation with Active Search |
Yes |
Site navigation |
No |
This type of menu layout is default in v6 |
|
| Gallery |
No |
|
Yes |
Gallery was discontinued in v6. The reason is that gallery component was using jQuery. Once we have removed jQuery from State Web Template codebase there were no viable vanilla JS alternative that would have the same functionality and would be accessible. |
gallery
gallery-small
carousel-gallery
gallery-item
item
three-up
four-up |
| Generic Spacing Classes |
Yes |
Spacing |
No |
Same spacing utility CSS classes are present in v6 |
|
| Gradient Backgrounds |
Yes |
Gradient backgrounds |
No |
Same gradient backgrounds are in V6 |
|
| Headers and Paragraphs |
Yes |
Typography |
No |
Matches with the new typography |
|
| Hero Info |
Yes |
Banner |
Yes |
This baner has very specific design and it didn't go inline with new State Template's UI/UX directions. Banner component is very similar alternative |
|
| Horizontal rules |
Yes |
Horizontal separator |
No |
Same component is in V6 |
|
| Icon Blocks |
Yes |
Card with icons |
Yes |
These icon blocks have very specific design and they didn't go inline with new State Template's UI/UX directions Cards with imagery is pretty similar alternative to what used to be icon blocks |
|
| Icon Font Library |
Yes |
Icons |
No |
Same icons library is in v6 |
|
| Image News Blocks |
No |
Card grid (news grid) |
Yes |
Image news block has very specific design and it didn't go inline with new State Template's UI/UX directions. Alternative exists in v6 as news grid cards |
block-hover
bg-overlay
.bg-overlay::before
.bg-overlay::after
block-hover_zoom
news-link |
| Info Blocks |
No |
Card |
Yes |
These blocks were discontinued because they have very specific header scg treatment, design and layout. This treatment did not go inline with new State template's look and feel and UI/UX directions. Card is very similar alternative for this component. |
|
| Job Detail (Supports Microdata) |
No |
News Article |
Yes |
Job details was discontinued because it has very limited and specific use case. It is up to a state agency how they want to showcase and format their job details. Also, there is CalJobs site that has their way of how to display and format job details. |
job-detailsub-header, job-description
skills-experience
about-department
additional-information |
| Job List (Supports Microdata) |
No |
News list |
Yes |
Job list was discontinued because it has very limited and specific use case. It is up to a state agency how they want to showcase and format their job openings. Also, there is CalJobs site that has their way of how to display and list CA jobs. |
job-list
job-item
header
title
filing-date
position-number
schedule
salary-range
location |
| Links |
Yes |
Links (external) |
Yes |
External link icon is automatically added to every external link in v6 |
|
| Lists (Bulleted & Expanding) |
Yes |
Lists |
No |
All the V5.5 lists are still in V6 |
|
| Location (Full) (Supports Microdata) |
No |
|
Yes |
Location full pattern have very specific design and it didn't go inline with new State Template's UI/UX directions. Similar layout can be recreated by using common Satte Template utility CSS classes. |
location
full
header
group
two-thirds
third
photo
example
map
contact
title
address
summary
description |
| Location (Widgets) (Supports Microdata) |
No |
|
Yes |
Location widgets have very specific design and they didn't go inline with new State Template's UI/UX directions. This component layout can be recreated by using flex grid, State Template icons and utility CSS classes. |
location
contact
address
other
mini
title
banner
thumbnail
summary
description |
| Media Object |
No |
|
Yes |
Media object was removed from v6 because there was no enough research and and use cases for it |
|
| Navigation Dropdown |
Yes |
Dropdown menu |
No |
Dropdown menu is available in v6 |
|
| News Blocks |
Yes |
Card grid (news grid) |
No |
Alternative exists in v6 as news grid cards |
|
| News Detail (Supports Microdata) |
Yes |
News Article |
Yes |
News details was updated in v6. There are news article or press release alternatives. |
news-detail
published
keywords |
| News List (Supports Microdata) |
Yes |
Newsroom |
Yes |
News list was updated in v6. There are featured news list alternatives. |
news-list
news-item
thumbnail
info
headline
description |
| Number Counter |
Yes |
Number counter |
No |
Number counter is present in v6. Pie Chart Number Counters were removed, however, because they were using extra jQuery plugin, which was adding extra size to template's core JS. |
|
| Panes |
No |
|
Yes |
Panes component was removed from v6 because it didn't go inline with new State Template's UI/UX directions. |
pane
odd
even
pane-img
pane-content |
| Parallax |
Yes |
Parallax |
No |
Parallax exists in v6 |
|
| Profile Banners (Supports Microdata) |
Yes |
Executive profile |
Yes |
THis component is replaced by executive profile in v6 |
media
media-body |
| Progress Bar |
Yes |
Progress Bar |
No |
Progress bar exists in v6 |
|
| Progress Block |
Yes |
Progress tracker |
No |
Improved version of progress block exist in v6. There are also more progress tracker variations:<br>- Horizontal tracker<br>- Vertical tracker<br>- Step list |
|
| Public Profile Detail (Supports Microdata) |
No |
Article |
Yes |
Public profile detail has very limited and specific use case. and it didn't go inline with new State Template's UI/UX directions. The news article can be used as alternative to this component |
profile-detail |
| Public Profile List (Supports Microdata) |
No |
Featured news |
Yes |
Public profile list has very limited and specific use case and it didn't go inline with new State Template's UI/UX directions. The featured news can be used as alternative to this component |
profile-list
profile-item
thumbnail
header
title
body
job
appointed
reappointed
term-end
footer |
| Publications (Supports Microdata) |
Yes |
List of articles |
Yes |
Publications has very specific design and it didn't go inline with new State Template's UI/UX directions. V6 List of articles is the closest thing to it. |
publication-list
pub-item
odd
even
thumbnail
pub-body
pub-title
pub-tags |
| Search (structure) |
Yes |
Search |
No |
Same search component exists in v6. However, in v6 we made the search active (always visible in desktop view) by default, whereas in previous State Web Template versions the search component was inactive by default. In mobile view, though, the search component don't have separate toggle button in v6. But it can be opened with hamburger toggle menu instead. |
|
| Sections |
Yes |
background utility classes |
Yes |
Sections components are deprecated because they are considered to be backgrounds. The background utility classes are viable alternative to the these sections. |
section
section-default
section-understated
section-primary
section-standout
section-inverted
collapsed |
| Service Tiles |
No |
|
Yes |
Service tiles were removed from v6 because they didn't go inline with new State Template's UI/UX directions. Also, this component have used jQuery which was no longer supported in v6. There was not viable vanilla JS alternative to replace this component. |
service-tile
teaser
title
service-tile-empty
service-tile-panel
related-services
other |
| Settings bar |
No |
|
Yes |
Settings bar was removed from the structure in v6 because modern browsers can provide options that were offered in settings bar. |
site-settings
close
disableHighContrastMode
enableHighContrastMode
resetTextSize
increaseTextSize
decreaseTextSize |
| Side Navigation Menu |
Yes |
Side navigation |
No |
Modified side navigation exists in v6, as well as accordion list side menu. However, the bootstrap side menu that were featured in v5.5 is not featured in v6 because it doesn't go inline with v6 look and feel. |
|
| Single Level Navigation |
Yes |
Single level menu |
No |
Single level manu is available in v6 |
|
| SocialSharer |
Yes |
Social media icons |
No |
Social media icons are exist in v6 |
|
| Sticky Footer |
No |
|
Yes |
v5.5 sticky footer version did not work in v6 layout because v6 layout already using two sticky components (main header and side navigation). This feature needed more complicated code than it was in v5.5. To keep v6 light and simple it was decided not to bring sticky footer in v6 |
sticky-footer |
| Tables |
Yes |
Table |
No |
Same table versions exist in v6 |
|
| Tabs |
Yes |
Tabs |
No |
Same tabs exist in v6. Bootstrap tabs are no longer featured in v6, however, because they lack in accessibility and responsiveness. |
|
| Testimonials |
Yes |
Blockquote with image |
Yes |
Testimonials were incorporated into blockquote component in v6. |
testimonial
testimonial-default
testimonial-danger
testimonial-standout
thumbnail
thumbnail-img
thumbnail-bottom
thumbnail-left
thumbnail-top
img-circle
testimonial-body |
| Text Accent Colors |
Yes |
Text accent colors |
No |
Same text accent colors exist in v6 |
|
| Toggle |
Yes |
Collapse |
No |
Similar bootstrap toggle feature exists in v6 codebase. However, we are not featuring this functionality since it's not v6 native feature. |
|
| Typography |
Yes |
Typography |
No |
Similar typography page exists in v6 |
|
| Utility header (structure) |
Yes |
Utility header |
No |
Similar utility header exists in v6, however some elements were replaced: social media icons were replaced with State of California official tagline. Also, settings links are not feature anymore, but they can be used in there. |
|