HTML / CSS / JavaScript

Cards, Lists, and Content Organization

Cards, kanban boards, timelines, list filters, and content organization.

84category cases
Current display: 84 cases
0003Cards, Lists, and Content Organization

Accordion Panel

Supports keyboard operation and smooth expanding FAQ accordion component.

HTMLCSSJavaScriptAccessibility
Open and run
0006Cards, Lists, and Content Organization

Vertical timeline

A responsive timeline for showcasing project progress and key milestones.

HTMLCSSTimelineLayout
Open and run
0011Cards, Lists, and Content Organization

3D Flipping Card

A three-dimensional information card that works with mouse, touch, and keyboard.

HTMLCSS3DCard
Open and run
0015Cards, Lists, and Content Organization

Live list search

Type keywords to filter cities instantly and highlight matching results.

HTMLCSSJavaScriptSearch
Open and run
0025Cards, Lists, and Content Organization

Filterable card wall for reading list

Complete a filterable card wall for the reading list scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Cards, Lists, and Content OrganizationFilterable Card WallHTMLCSSJavaScript
Open and run
0041Cards, Lists, and Content Organization

Reading List Kanban Board

Complete the task board in a reading-list scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationTask boardHTMLCSS GridJavaScript
Open and run
0057Cards, Lists, and Content Organization

Reading List Activity Timeline

Complete an activity timeline for a reading-list scenario: real content, actionable controls, clear status feedback, and layouts that work across sizes.

Cards, Lists, and Content OrganizationActivity timelineHTMLCSSJavaScript
Open and run
0073Cards, Lists, and Content Organization

Reading List Accordion Content List

Complete a collapsible content list for a reading list scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Cards, Lists, and Content OrganizationAccordion Content ListHTMLCSSJavaScript
Open and run
0089Cards, Lists, and Content Organization

Reading List Story Carousel Cards

Complete a story carousel card for a reading-list scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Cards, Lists, and Content OrganizationStory carousel cardHTMLCSSJavaScript
Open and run
0105Cards, Lists, and Content Organization

Reading List Priority Queue

Complete a priority queue in the reading list scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationPriority queueHTMLCSS GridJavaScript
Open and run
0121Cards, Lists, and Content Organization

Expandable Reading List Records

Create expandable records in the reading list scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationExpandable RecordsHTMLCSSJavaScript
Open and run
0137Cards, Lists, and Content Organization

Reading List Masonry Notes

Completed a waterfall notes layout for reading list scenarios: includes real content, actionable controls, clear status feedback, and responsive layouts.

Cards, Lists, and Content OrganizationWaterfall notesHTMLCSSJavaScript
Open and run
0153Cards, Lists, and Content Organization

Reading List Bookmark Organizer

Complete the bookmark organizer for a reading list scenario: includes realistic content, actionable controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationBookmark OrganizerHTMLCSS GridJavaScript
Open and run
0169Cards, Lists, and Content Organization

Reading List Contact Index

Complete a contact index in a reading-list scenario: real content, actionable controls, clear state feedback, and layouts across sizes.

Cards, Lists, and Content OrganizationContact indexHTMLCSSJavaScript
Open and run
0185Cards, Lists, and Content Organization

Filterable Card Wall for Design Tasks

Complete the filterable card wall in the design-tasks scenario: includes real content, interactive controls, clear status feedback, and layouts for multiple sizes.

Cards, Lists, and Content OrganizationFilterable Card WallHTMLCSSJavaScript
Open and run
0201Cards, Lists, and Content Organization

Design Task Kanban

Complete a task board in a design tasks scenario: includes real content, actionable controls, clear state feedback, and cross-size layout.

Cards, Lists, and Content OrganizationTask boardHTMLCSS GridJavaScript
Open and run
0217Cards, Lists, and Content Organization

Design Task Activity Timeline

Complete an activity timeline for a design task scenario: includes realistic content, actionable controls, clear state feedback, and cross-size layouts.

Cards, Lists, and Content OrganizationActivity timelineHTMLCSSJavaScript
Open and run
0233Cards, Lists, and Content Organization

Design Task Collapsible Content List

Complete the accordion content list in a design tasks scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationAccordion Content ListHTMLCSSJavaScript
Open and run
0249Cards, Lists, and Content Organization

Design Task Story Carousel Cards

Complete the story carousel card in the design tasks scenario: include real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationStory carousel cardHTMLCSSJavaScript
Open and run
0265Cards, Lists, and Content Organization

Design Task Priority Queue

Complete a priority queue for the design tasks scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts.

Cards, Lists, and Content OrganizationPriority queueHTMLCSS GridJavaScript
Open and run
0281Cards, Lists, and Content Organization

Expandable Design Task Records

Complete expandable records in a design-task scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationExpandable RecordsHTMLCSSJavaScript
Open and run
0297Cards, Lists, and Content Organization

Design Task Masonry Notes

Complete a masonry notes layout for design-task scenarios: real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationWaterfall notesHTMLCSSJavaScript
Open and run
0313Cards, Lists, and Content Organization

Design Task Bookmark Organizer

Complete the bookmark organizer for a design tasks scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationBookmark OrganizerHTMLCSS GridJavaScript
Open and run
0329Cards, Lists, and Content Organization

Design task contact index

Complete the contact directory in a design task scenario: include real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationContact indexHTMLCSSJavaScript
Open and run
0345Cards, Lists, and Content Organization

Local events filterable card wall

Complete a filterable card wall in a local events scenario: include real content, actionable controls, clear status feedback, and a responsive layout across sizes.

Cards, Lists, and Content OrganizationFilterable Card WallHTMLCSSJavaScript
Open and run
0360Cards, Lists, and Content Organization

Local Events Task Board

Build a task board for a local events scenario: includes real content, actionable controls, clear state feedback, and cross-size layouts.

Cards, Lists, and Content OrganizationTask boardHTMLCSS GridJavaScript
Open and run
0375Cards, Lists, and Content Organization

Local Event Timeline

Complete an activity timeline in a local events scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Cards, Lists, and Content OrganizationActivity timelineHTMLCSSJavaScript
Open and run
0390Cards, Lists, and Content Organization

Local Events Accordion List

Complete the accordion content list in the local events scenario: with real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationAccordion Content ListHTMLCSSJavaScript
Open and run
0405Cards, Lists, and Content Organization

Local Events Story Carousel Cards

Complete the story carousel card in a local events scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationStory carousel cardHTMLCSSJavaScript
Open and run
0418Cards, Lists, and Content Organization

Local events priority queue

Complete a priority queue in a local-events scenario: real content, actionable controls, clear state feedback, and layouts across sizes.

Cards, Lists, and Content OrganizationPriority queueHTMLCSS GridJavaScript
Open and run
0431Cards, Lists, and Content Organization

Local Events Expandable Records

Complete an expandable records component in a local events scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Cards, Lists, and Content OrganizationExpandable RecordsHTMLCSSJavaScript
Open and run
0444Cards, Lists, and Content Organization

Local Events Masonry Notes

Complete a waterfall-style notes board in a local events scenario: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationWaterfall notesHTMLCSSJavaScript
Open and run
0456Cards, Lists, and Content Organization

Local Events Bookmark Organizer

Complete a bookmark organizer for local event scenarios, featuring real content, actionable controls, clear status feedback, and cross-size layouts.

Cards, Lists, and Content OrganizationBookmark OrganizerHTMLCSS GridJavaScript
Open and run
0466Cards, Lists, and Content Organization

Local Events Contact Index

Complete a contact index for local event scenarios: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationContact indexHTMLCSSJavaScript
Open and run
0475Cards, Lists, and Content Organization

Filterable Card Wall for Team Directory

Create a filterable card wall for a team directory scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts.

Cards, Lists, and Content OrganizationFilterable Card WallHTMLCSSJavaScript
Open and run
0483Cards, Lists, and Content Organization

Team Directory Task Board

Complete a kanban board for a team directory scenario: includes realistic content, actionable controls, clear status feedback, and cross-size layouts.

Cards, Lists, and Content OrganizationTask boardHTMLCSS GridJavaScript
Open and run
0491Cards, Lists, and Content Organization

Team Directory Activity Timeline

Complete an activity timeline for a team directory scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationActivity timelineHTMLCSSJavaScript
Open and run
0496Cards, Lists, and Content Organization

Team Directory Accordion Content List

Complete a collapsible content list for a team directory scenario: includes real content, actionable controls, clear state feedback, and cross-size layouts.

Cards, Lists, and Content OrganizationAccordion Content ListHTMLCSSJavaScript
Open and run
0500Cards, Lists, and Content Organization

Team Directory Story Carousel Cards

Completed a story carousel card set for a team directory scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationStory carousel cardHTMLCSSJavaScript
Open and run
0504Cards, Lists, and Content Organization

Team Directory Priority Queue

Complete a priority queue in a team directory scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationPriority queueHTMLCSS GridJavaScript
Open and run
0508Cards, Lists, and Content Organization

Team Directory Expandable Records

Complete the expandable records for a team directory scenario: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.

Cards, Lists, and Content OrganizationExpandable RecordsHTMLCSSJavaScript
Open and run
0512Cards, Lists, and Content Organization

Team Directory Masonry Notes

Complete a masonry notes layout in a team directory scenario: include real content, actionable controls, clear status feedback, and responsive behavior across sizes.

Cards, Lists, and Content OrganizationWaterfall notesHTMLCSSJavaScript
Open and run
0526Cards, Lists, and Content Organization

Archive Shelf Bookmark Organizer

Complete the bookmark organizer in an archive-shelf scenario: include real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationBookmark OrganizerHTMLCSS GridJavaScript
Open and run
0542Cards, Lists, and Content Organization

Audio Notes Contact Index

Build a contact index for an audio notes scenario: real content, interactive controls, clear status feedback, and responsive layout across screen sizes.

Cards, Lists, and Content OrganizationContact indexHTMLCSSJavaScript
Open and run
0551Cards, Lists, and Content Organization

Care Plan Accordion List

Complete a collapsible content list for a care-plan scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationAccordion Content ListHTMLCSSJavaScript
Open and run
0567Cards, Lists, and Content Organization

Public Proposal Activity Timeline

Complete an activity timeline for a public proposal scenario: includes realistic content, interactive controls, clear status feedback, and a responsive layout.

Cards, Lists, and Content OrganizationActivity timelineHTMLCSSJavaScript
Open and run
0576Cards, Lists, and Content Organization

Sound Clipping Box Bookmark Organizer

Complete a bookmark organizer for the sound clipping box scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Cards, Lists, and Content OrganizationBookmark OrganizerHTMLCSS GridJavaScript
Open and run
0592Cards, Lists, and Content Organization

Sound Handover Log Contact Index

Complete contact indexing in a sound handover log scenario: includes real content, actionable controls, clear state feedback, and multi-size layout.

Cards, Lists, and Content OrganizationContact indexHTMLCSSJavaScript
Open and run
0601Cards, Lists, and Content Organization

Sound Notebook Expandable Records

Complete the expandable records for the sound notebook scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationExpandable RecordsHTMLCSSJavaScript
Open and run
0617Cards, Lists, and Content Organization

Filtered card wall for the sound plan wall

Complete a filterable card wall for the sound plan wall scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Cards, Lists, and Content OrganizationFilterable Card WallHTMLCSSJavaScript
Open and run
0626Cards, Lists, and Content Organization

Sound Prompt Cards Task Board

Complete a Kanban board in a sound-prompt card scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationTask boardHTMLCSS GridJavaScript
Open and run
0642Cards, Lists, and Content Organization

Audio Directory Board Masonry Notes

Complete the masonry notes layout for a sound roster board scenario: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.

Cards, Lists, and Content OrganizationWaterfall notesHTMLCSSJavaScript
Open and run
0651Cards, Lists, and Content Organization

Audio Story Shelf Priority Queue

Complete the priority queue in the audio story shelf scenario: includes real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationPriority queueHTMLCSS GridJavaScript
Open and run
0667Cards, Lists, and Content Organization

Audio Patrol Line Story Carousel Cards

Complete the story carousel cards in the audio patrol line scenario: include real content, interactive controls, clear status feedback, and cross-size layout.

Cards, Lists, and Content OrganizationStory carousel cardHTMLCSSJavaScript
Open and run
0676Cards, Lists, and Content Organization

Outpatient Clip Box Collapsible Content List

In the outpatient clip box scenario, complete a collapsible content list: including real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationAccordion Content ListHTMLCSSJavaScript
Open and run
0692Cards, Lists, and Content Organization

Clinic Handover Log Activity Timeline

Complete an activity timeline for an outpatient handover log scenario: includes real content, actionable controls, clear status feedback, and responsive layout across sizes.

Cards, Lists, and Content OrganizationActivity timelineHTMLCSSJavaScript
Open and run
0701Cards, Lists, and Content Organization

Outpatient Notebook Bookmark Organizer

Complete a bookmark organizer for an outpatient notebook scenario: includes real content, actionable controls, clear status feedback, and responsive layouts.

Cards, Lists, and Content OrganizationBookmark OrganizerHTMLCSS GridJavaScript
Open and run
0717Cards, Lists, and Content Organization

Clinic Plan Wall Contact Index

Complete a contact directory in a clinic plan wall scenario: real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationContact indexHTMLCSSJavaScript
Open and run
0726Cards, Lists, and Content Organization

Outpatient prompt card expandable records

Complete the expandable records pattern for the clinic prompt cards scenario: real content, interactive controls, clear status feedback, and responsive layout across screen sizes.

Cards, Lists, and Content OrganizationExpandable RecordsHTMLCSSJavaScript
Open and run
0742Cards, Lists, and Content Organization

Outpatient Directory Board Filterable Card Wall

Build a filterable card wall in a clinic roster board scenario: includes realistic content, interactive controls, clear status feedback, and responsive layout across sizes.

Cards, Lists, and Content OrganizationFilterable Card WallHTMLCSSJavaScript
Open and run
0751Cards, Lists, and Content Organization

Outpatient rounds task board

Complete a task board in an outpatient round scenario: includes real content, interactive controls, clear status feedback, and responsive layouts.

Cards, Lists, and Content OrganizationTask boardHTMLCSS GridJavaScript
Open and run
0767Cards, Lists, and Content Organization

Outpatient Story Shelf Masonry Notes

Complete the waterfall note layout in an outpatient story shelf scenario: include realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationWaterfall notesHTMLCSSJavaScript
Open and run
0776Cards, Lists, and Content Organization

Outpatient Visit Priority Queue

Complete a priority queue in an outpatient round-robin scenario: includes real content, interactive controls, clear state feedback, and responsive layout.

Cards, Lists, and Content OrganizationPriority queueHTMLCSS GridJavaScript
Open and run
0792Cards, Lists, and Content Organization

Community Market Story Carousel Card

Complete a story-carousel card in a community market scenario: includes real content, interactive controls, clear state feedback, and cross-size layout.

Cards, Lists, and Content OrganizationStory carousel cardHTMLCSSJavaScript
Open and run
0801Cards, Lists, and Content Organization

Course Clips Accordion Content List

Complete the collapsible content list in the course clips scenario: with real content, interactive controls, clear status feedback, and cross-size layouts.

Cards, Lists, and Content OrganizationAccordion Content ListHTMLCSSJavaScript
Open and run
0817Cards, Lists, and Content Organization

Activity Signup Timeline

Complete the activity timeline for event signups, with real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationActivity timelineHTMLCSSJavaScript
Open and run
0826Cards, Lists, and Content Organization

Field Clip Box Bookmark Organizer

In the field clipping box scenario, complete the bookmark organizer: includes real content, actionable controls, clear status feedback, and cross-size layouts.

Cards, Lists, and Content OrganizationBookmark OrganizerHTMLCSS GridJavaScript
Open and run
0842Cards, Lists, and Content Organization

Field handover log contact index

Complete the contact index in a field handover log scenario: with real content, actionable controls, clear status feedback, and layouts that adapt across sizes.

Cards, Lists, and Content OrganizationContact indexHTMLCSSJavaScript
Open and run
0851Cards, Lists, and Content Organization

Field Notebook Expandable Records

Complete an expandable records experience for a field notebook scenario: includes real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationExpandable RecordsHTMLCSSJavaScript
Open and run
0867Cards, Lists, and Content Organization

Field Notes Filterable Card Wall

Complete a filterable card wall for a field notes scenario, with real content, interactive controls, clear status feedback, and responsive layouts.

Cards, Lists, and Content OrganizationFilterable Card WallHTMLCSSJavaScript
Open and run
0876Cards, Lists, and Content Organization

Field Plan Wall Task Board

In a field planning wall scenario, complete a task kanban board: real content, interactive controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationTask boardHTMLCSS GridJavaScript
Open and run
0892Cards, Lists, and Content Organization

Field prompt cards waterfall notes

In a field prompt card scenario, complete a masonry note layout: includes real content, interactive controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationWaterfall notesHTMLCSSJavaScript
Open and run
0901Cards, Lists, and Content Organization

Field Directory Board Priority Queue

Complete a priority queue in a field roster board scenario: includes realistic content, interactive controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationPriority queueHTMLCSS GridJavaScript
Open and run
0917Cards, Lists, and Content Organization

Field Story Shelf Story Carousel Card

Complete a story carousel card in a field story shelf scenario: includes real content, actionable controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationStory carousel cardHTMLCSSJavaScript
Open and run
0926Cards, Lists, and Content Organization

Field Survey Line Accordion Content List

Complete the collapsible content list in the field inspection route scenario: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.

Cards, Lists, and Content OrganizationAccordion Content ListHTMLCSSJavaScript
Open and run
0942Cards, Lists, and Content Organization

Garden Journal Activity Timeline

An activity timeline built for a garden journal scenario, with real content, actionable controls, clear status feedback, and layouts that adapt across sizes.

Cards, Lists, and Content OrganizationActivity timelineHTMLCSSJavaScript
Open and run
0951Cards, Lists, and Content Organization

Creative Log Bookmark Organizer

Complete a bookmark organizer in a creative log scenario: includes real content, interactive controls, clear status feedback, and responsive layout across sizes.

Cards, Lists, and Content OrganizationBookmark OrganizerHTMLCSS GridJavaScript
Open and run
0967Cards, Lists, and Content Organization

Pet Records Contact Directory Index

Complete the contact index for a pet records scenario: includes real content, actionable controls, clear status feedback, and a responsive layout across sizes.

Cards, Lists, and Content OrganizationContact indexHTMLCSSJavaScript
Open and run
0976Cards, Lists, and Content Organization

Podcast Library Expandable Records

Complete an expandable record in a podcast library scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationExpandable RecordsHTMLCSSJavaScript
Open and run
0992Cards, Lists, and Content Organization

Filterable Recipe Collection Card Wall

Complete a filterable card wall for a recipe collection scenario: include real content, actionable controls, clear state feedback, and responsive layouts across sizes.

Cards, Lists, and Content OrganizationFilterable Card WallHTMLCSSJavaScript
Open and run
1001Cards, Lists, and Content Organization

Research Clips Kanban Board

Complete a task board for a research clips scenario: includes real content, interactive controls, clear state feedback, and cross-size layouts.

Cards, Lists, and Content OrganizationTask boardHTMLCSS GridJavaScript
Open and run
1017Cards, Lists, and Content Organization

Shift handover waterfall notes

Create a waterfall note board for a shift handover records scenario: includes realistic content, interactive controls, clear status feedback, and responsive layouts.

Cards, Lists, and Content OrganizationWaterfall notesHTMLCSSJavaScript
Open and run
1026Cards, Lists, and Content Organization

Studio Board Priority Queue

Complete a priority queue flow for the studio board scenario: includes realistic content, actionable controls, clear state feedback, and layouts that adapt across sizes.

Cards, Lists, and Content OrganizationPriority queueHTMLCSS GridJavaScript
Open and run
1042Cards, Lists, and Content Organization

Studio Clip Box Story Carousel Card

Complete a story carousel card in the Studio Clip Box scenario: includes real content, interactive controls, clear state feedback, and cross-size layout.

Cards, Lists, and Content OrganizationStory carousel cardHTMLCSSJavaScript
Open and run