> ## Documentation Index
> Fetch the complete documentation index at: https://docs.askui.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Cards & Tiles

> Extract data from card layouts and tile grids

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

```python theme={null}
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
   ```python theme={null}
   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
   ```python theme={null}
   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
   ```python theme={null}
   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")
   ```