Working With Cards
Cards are versatile containers that help organize and present content in a clean, structured way. Trongate CSS provides built-in card styling with minimal markup requirements.
Basic Card Structure
A basic card consists of two main parts: a heading and a body. Here's a simple example:
Welcome to our platform! This is a basic card example showing how content can be organized using Trongate's card component.
Cards with Different Content Types
Cards can contain various types of content including text, lists, buttons, and more:
- Responsive Design
- Easy Integration
- Modern Architecture
Multiple Cards Layout
Cards can be arranged side by side using Trongate's flex utilities:
Perfect for individuals and small teams with a focus on efficiency.
Ideal for growing businesses and organizations that need more.
In the example, we also use .text-center to center-align the modal body content. Here's the source code:
Customizing Card Appearance
You can customize cards using CSS variables and additional styles:
This card demonstrates custom styling possibilities.
Top Tips
- Keep card content focused and concise
- Use appropriate spacing within card bodies (utilize margin utility classes)
- Ensure card headings are descriptive but brief
- Consider mobile responsiveness when using multiple cards
- Use consistent card sizes within the same row or section
Cards automatically inherit your theme's primary color for their headings. You can override this using CSS variables or custom styles as shown in the examples above.