Skip to main content
Web Services University of Florida

  • Commonly Used

  • Categories

Mercury Pattern Library

0 results found

Accordion

Togglable content use for FAQs and revealing descriptions for topics

Alert Banner

Alert banner that displays emergency information at the top of the website.

Animated Border Button

animated border button features dynamic visual effects such as pulsating, color changes, or transitions to indicate interactivity or selection.

Announcements Showcase

Stay up-to-date with the latest news and updates from our organization.

Article Header without Image

Article Header with H1 text and no image

Article Page Header-with Image

Large article header image with H1 text

Blockquote

A blockquote is a typographic element used to visually distinguish quoted content from the main text, typically set off with indentation, quotation marks, or other formatting conventions.

Blue Centered Text CTA

Text-only showcase for pages.

Breadcrumbs

A navigational tool that displays a hierarchical trail of links, helping users easily track their path and find their way back to previous pages within the site, enhancing user experience.

CTA Showcase

A showcase of call-to-action buttons on a website or webpage serves the purpose of prompting users to take specific actions

Cards - Right Rail

Right-side rail cards, text or link buttons

Cards on a Right Rail

Cards - Text + Image

Cards with image, text and button.

Cards with text and image

Cards - Text only

Cards with title and text that can be used as a link button

Contact Form

A user-friendly feature that allows visitors to send messages with their name, email, subject, and message, streamlining communication with website administrators.

Content Carousel

The Content Carousel component is a carousel slider that displays multiple slides with text content and background images.

Content Carousel - Stack

The Content Carousel component is a carousel slider that displays multiple slides with text content and background images.

Embeds - Google Maps

Add a Google Map to a page

Embeds - Iframes

Insert websites and applications into a page

Embeds - Lottie animations

Add lightweight, scalable animations to a page

Embeds - PDFs

Add PDF to a page

Event Shell

Calendar Events from Livewhale

Factoid

Displays three facts and their brief corresponding details.

Example of Factoid component being implemented

Faculty Bio Quote

Similar to a Blockquote, but coordinated for a Faculty Bio Block..

Faculty Bio Block

Showcase detailed information about a faculty or staff member within an educational institution or organization.

Faculty Landing Block

Aggregates one or more Faculty Bio Blocks into a listing suitable for a standalone page.

Faculty Listing Carousel

A component that aggregates Faculty Bio Blocks into a small carousel for use on pages with other content.

Featured Cards

Group of two or three cards with image, title, description, and link..

Featured Content Header

One featured article and two supporting articles.

Featured Video

Full-width featured video with required title text and optional button and description.

Featured Video - Multiple

3 Featured Videos with required title text and optional button and description.

Footer

The footer at the bottom of the webpage provides extra links and information that the user may need to access.

Full width video / image

Full width video or image with blue stripes background

Functional Category/Year Filter

Enhance user experience by allowing seamless content filtering based on categories and publication years.

Hero

Hero/Banner Image for top of landing pages

Hero Split Banner

Hero/Banner image with featured text box

Image

Images can improve the design and the appearance of a web page.

Image Gallery

Image Gallery component displays a collection of images in a carousel format.

Link

Links are found in nearly all web pages. Links allow users to click their way from page to page.

Links

Main Navigation

a prominent set of links or menus typically positioned at the top of the interface, providing users with primary access to key sections or pages within the website or application.

Main Nav

News Card Template

Displays row of news card items with option to load more..

Related Story

Right-Side Card for Related Articles.

Section Navigation

An orange pullout navigation is a clickable panel with links to different website sections, making content access straightforward.

Share Bar

Empower users to share your content effortlessly with the Single Social Share Component, featuring prominent icons for popular social media platforms..

Share Bar

Showcase Text + Image

A block that showcases text with a corresponding image and button.

Showcase—Text Only

Text-only showcase for pages.

Showcase -Text Only

Slider News

Display news articles in slider format

Tab Block

Togglable content use for FAQs and revealing descriptions for topics

Table

Tables to display information with columns and rows.

Title Block

The Title Block displays the title at the top of the page.

Title Tool Block

This content type allows you to add a link to each card with an icon or small image and some descriptive text

Visual Navigation

This content type is used to display other useful links using visual media and an interactive hover event..

Search

A user interface element typically located prominently on a webpage or application, allowing users to input search queries to retrieve relevant information or content.