Rivet 2 header preview

Header component preview #

Last week, we published the fourth alpha release of Rivet 2 to GitHub. This alpha release includes, among other updates, our first iteration on a redesigned Rivet header component. This new header is similar to those you might have seen on the recently relaunched iu.edu, uits.iu.edu, and covid.iu.edu websites.

Rivet’s scope has broadened to include a wider variety of digital properties than the previous version, so our goal was to create a visually lightweight header that clearly communicated the IU brand while being usable, accessible, and flexible.

You can see an interactive preview of the new header on v2.rivet.iu.edu. This preview also contains code examples and implementation notes for development teams using the Rivet 2 alpha.

New documentation features #

As part of the alpha development process, we’ve also been exploring some enhancements to how Rivet components are documented.

In the header preview linked above, you’ll notice two new features attached to code examples:

• Full-screen preview. Code examples can be viewed in isolation in a new browser tab. This feature is intended to help give developers a distraction-free way to see how a component looks and works.
• Edit on CodePen. Code examples can be edited directly in CodePen. This feature is intended to provide developers with a sandbox in which they can quickly experiment with components without needing to set up a local development environment.

Leaving feedback #

The new version of the Rivet header is still in development and we plan to continue revising it over the coming months. We welcome your suggestions during this process.

To leave feedback on the header preview, post a comment to our GitHub Discussions thread or send a message to rivet@iu.edu.