Card layouts are popular UI patterns for displaying grouped information. Learn how to extract data from cards, including their selection states and complex fields.

​
Basic Card Extraction

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

  1. 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
        )
  2. 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
  3. 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")