A card is a compact collection of HTML tags and CSS properties that presents related information about an item, such as artwork, an event, a project, or a person. section 11.2.1
A typical card combines several focused elements:
- Image: previews or represents the item. section 11.2.1
- Heading: names or titles the item. section 11.2.1
- Brief text: describes the item. section 11.2.1
- Button or link: supports an action or provides more information. section 11.2.1
Choose the layout that fits the content:
- Vertical cards place the image, heading, description, and link from top to bottom. section 11.2.1 section 11.6
- Horizontal cards place the image beside the heading, description, and link. section 11.2.1 section 11.6
- Customize the presentation with edge-to-edge images, drop shadows, rounded corners, colors, font sizes, and heading levels. section 11.2.2 section 11.6
A specific card prompt
Ask for a card no wider than 350px, place images/portfolio01.jpg at the top, add the heading "I Fell In Love With ChatGPT," a brief description, a "Learn more" link to portfolio01.html, and centered text. Save the generated HTML and CSS in the requested files. section 11.6
