Texas Open Data Portal  Interactive Element Demo


Below are interactive web elements free to use in story page HTML embeds on the Texas Open Data Portal. 
Visit the
Interactive Element Library to download the customizable HTML codes.

Buttons

Interactive buttons add a sense of dynamism to a story page and increase user engagement. Provided below are the spanning button and elliptical buttons.

1. Spanning Buttons

The interactive button spans and displays a double arrow symbol when a mouse hovers over it. Below are examples of using the spanning buttons on a story page.
The "Home" button links to the home page of the Texas Open Data Portal. Replace the URL in the code snippet to make it points to an organization's home page.
This "Explore" button points to the transportation datasets in the data catalog. Replace the URL in the code snippet to make it points to a web page that audiences could explore.
The "Program" button links to the story page of TDA's School Nutrition Programs. Change the URL in the code snippet to make it points to an organization's program page.


2. Elliptical Buttons

The elliptical button "stands out" with a shadow effect when a mouse hovers over it. Below are examples of using the elliptical button on a story page.
This “More” button directs audiences to the metadata page of the DIR Cooperative Contract Sales dataset. Change the URL in the code snippet to make it point to a web page that provides additional information to audiences.
The “New” button directs audiences to recently published or updated content. Change the URL in the code snippet to make it point to new content for audiences to see.
The “Data” button directs audiences to datasets. Change the URL in the code snippet to make it point to an online dataset.

Hover Effects

Hover effect is the alternation of content or component when a mouse is over it. It draws attention and provides additional information. Provided below are three different interactive web elements with hover effects.

1. Flip Card with Hover 

The circular flip card "Texas Data Program" on the left has its title on the front and its description on the back. Customized the flip card by replacing the front of the flip card with any keyword, name, or title, and the back of the flip card with corresponding information.

2. Tile Card with Hover

The rectangular flip card "Shared Technology Services" has its title and a one-sentence description on the front, and detailed information on the back, with an external link allowing the audiences to further explore the content. Customized the flip card by replacing the content and URL in the code snippet.

3. Button with Hover

The text on this hoverable button changes when a mouse hovers over it. The button is clickable and points to the cooperative contracts page. Replace the text and URL to customize the button.

Animations

Animations add life and soul to a website. Provided below are two different animations.

1. Glowing Circle

The glowing circle draws the audience's attention. The glowing animation stops when a mouse hovers over it and resumes when the mouse moves away. Customize the glowing circle by changing its color and the text on it.

2. Scrolling Bar

Use this scrolling banner to display organization slogans.

Dropdown

The accordion dropdown organizes information effectively and conserves screen space.

Nested Accordion Dropdown

Provided here is a nested accordion dropdown (two layers). The inner layer contains external links to provide additional information. Customize the nested accordion dropdown by changing its color and the number of items in each layer.

Pop-up

Pop-up increases interaction, provides additional information to the audiences, and saves screen space.

Popup

The blue underlined text on the left has a pop-up feature. It displays a pop-up information card when a mouse hovers over it. Replace the content to customize the pop-up.

Embedded Videos


This is a video of DIR's programs and services. You can find useful tutorials in this video, including embedding videos onto the web page.