Design a City Card Component to Represent Cities

Objective

Design a card component that represents a city, displaying key information such as the city's name, country, image, a detail button, and a badge. This card will be used in a grid layout on the homepage to showcase all 56 cities.

Description

We need a visually appealing and informative card design to represent cities on our homepage. Each card should include the city's name, country, an image that represents the city, a button for more details, and a badge for additional categorization or status. The design should be consistent with our existing UI components and adhere to the design guidelines found at UI Components Library.

The cards will be part of a grid layout, making it essential for the design to be responsive and adaptable to different screen sizes. The goal is to provide users with a snapshot of each city, encouraging them to explore further details.

Requirements

The card must display the following information:
- City name
- Country
- An image representative of the city
- A "Details" button
- A badge for additional information or categorization
Follow the design guidelines provided in our UI Components Library.
Ensure the design is responsive and adapts well to a grid layout on various devices.
Consider accessibility best practices to ensure the component is usable by everyone.

Example Data


const berlin: Berlin = {
  name: "Berlin",
  country: "Germany",
  population: 3_500_500,
  attractions: ["Brandenburg Gate", "Reichstag", "Berlin Wall", "Museum Island"],
  temperature: 24,
  costOfLiving: {
    breakfast: 10,
    lunch: 15,
    dinner: 20,
  },
  flight: {
    from: "London",
    to: "Berlin",
    price: 100,
  },
  hotel: {
    name: "Hotel Berlin",
    price: 100,
  },
  lowCostActivities: {
    activities: ["Visit a park", "Free walking tour", "Visit a museum"],
    places: ["Mauerpark", "Tiergarten", "Museum Island"],
  },
};

Cyberants-berlin / ryanair