Card layouts are popular UI patterns for displaying grouped information. Learn how to extract data from cards, including their selection states and complex fields.
from askui import ResponseSchemaBase, VisionAgent
from typing import List, Optional
class Card(ResponseSchemaBase):
title: str
description: str
button_text: str
image_url: Optional[str] = None
with VisionAgent() as agent:
cards = agent.get(
"Extract all card information",
response_schema=List[Card]
)
# Process cards
for card in cards:
print(f"{card.title}: {card.description}")
Best Practices
-
Handle Empty States: Check for “no results” cards
with VisionAgent() as agent:
cards = agent.get("Extract all cards", response_schema=List[Card])
if not cards:
# Check for empty state message
empty_message = agent.get(
"What does the empty state message say?",
response_schema=str
)
-
Pagination for Card Grids: Handle large collections
with VisionAgent() as agent:
all_cards = []
page = 1
while True:
page_cards = agent.get(
"Extract visible cards on current page",
response_schema=List[Card]
)
all_cards.extend(page_cards)
has_more = agent.get("Is there a 'Load More' button?", response_schema=bool)
if has_more:
agent.click("Load More")
page += 1
else:
break
-
Dynamic Card Loading: Handle lazy-loaded content
with VisionAgent() as agent:
# Scroll to load more cards
initial_count = agent.get("How many cards are visible?", response_schema=int)
agent.scroll("down", 500)
agent.wait(2) # Wait for loading
new_count = agent.get("How many cards are visible?", response_schema=int)
if new_count > initial_count:
print(f"Loaded {new_count - initial_count} more cards")
