Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
syncfusion avatar

Syncfusion Angular Card

syncfusion/angular-ui-components-skills

  • 170 installs
  • Updated August 4, 2026
  • syncfusion/angular-ui-components-skills

Use syncfusion-angular-card for development tasks

About

syncfusion-angular-card: A skill for development. This provides functionality for development workflows.

  • syncfusion-angular-card

Syncfusion Angular Card by the numbers

  • 170 all-time installs (skills.sh)
  • +11 installs in the week ending Aug 5, 2026 (Skillselion tracking)
  • Ranked #2,287 of 4,347 Backend & APIs skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/syncfusion/angular-ui-components-skills --skill syncfusion-angular-card

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs170
Last updatedAugust 4, 2026
Repositorysyncfusion/angular-ui-components-skills ↗

What it does

Use syncfusion-angular-card for development tasks

Files

SKILL.mdMarkdownGitHub ↗

Implementing Syncfusion Angular Cards

The Card is a lightweight, CSS-based layout component that provides a flexible container for displaying structured content. Perfect for creating reusable content blocks with headers, images, text, and interactive elements.

When to Use This Skill

Use this skill when users need to:

  • Create card-based layouts with structured content
  • Add headers with titles, subtitles, and images to cards
  • Include images and captions within cards
  • Add interactive action buttons to cards
  • Arrange card elements horizontally
  • Customize card appearance with CSS
  • Build flexible, responsive content containers
  • Integrate other Syncfusion components within cards

Component Overview

The Syncfusion Angular Card (e-card) is a pure CSS component with no JavaScript dependencies. It provides semantic HTML structure and CSS classes that enable you to build professional card layouts with:

  • Flexible Structure: Pure CSS composition with no complex dependencies
  • Semantic Elements: Clear class-based architecture for headers, content, and actions
  • Responsive Design: Works with CSS grid, flexbox, and responsive layouts
  • Component Integration: Host other Syncfusion components inside cards
  • Extensive Customization: Full CSS control over appearance and behavior

Key CSS Classes:

  • e-card — Root card container
  • e-card-header — Header section wrapper
  • e-card-content — Main content area
  • e-card-image — Image container
  • e-card-actions — Action buttons container
  • e-card-horizontal — Horizontal layout mode
  • e-card-separator — Visual divider between sections

---

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

  • Package installation and setup
  • Angular CLI and environment configuration
  • Adding CSS theme imports
  • Basic card structure with headers and content
  • Your first working card example

Card Headers

📄 Read: references/card-headers.md

  • Header structure and wrapper elements
  • Adding titles and subtitles
  • Including images in headers
  • Image positioning (before/after caption)
  • Rounded corners and image styling
  • Complete header examples

Card Images

📄 Read: references/card-images.md

  • Adding images to card content
  • Image sizing and dimensions
  • Image titles and captions with overlay
  • Dividers for visual separation
  • Integrating other components inside cards
  • Complete image examples

Action Buttons

📄 Read: references/action-buttons.md

  • Creating action buttons and links
  • Horizontal button alignment (default)
  • Vertical button alignment
  • Icon buttons and custom styling
  • Interactive card controls
  • Button examples with layouts

Horizontal Layout

📄 Read: references/horizontal-layout.md

  • Side-by-side element alignment
  • Using the e-card-horizontal class
  • Stacked sections with e-card-stacked
  • Mixed horizontal and vertical layouts
  • Combining images with vertical content
  • Horizontal layout examples

Styling and Customization

📄 Read: references/styling-customization.md

  • CSS structure and class selectors
  • Customizing card appearance
  • Header, content, and button styling
  • Image and divider customization
  • Theme integration
  • Advanced CSS patterns

---

Quick Start Example

Here's a minimal working card with header, content, and action buttons:

<!-- In your app.component.html or template -->
<div class="e-card" style="max-width: 400px;">
  <!-- Header Section -->
  <div class="e-card-header">
    <div class="e-card-header-caption">
      <div class="e-card-header-title">Card Title</div>
      <div class="e-card-sub-title">Subtitle or description</div>
    </div>
  </div>

  <!-- Content Section -->
  <div class="e-card-content">
    Your main content goes here. This can be text, images, or any HTML elements.
  </div>

  <!-- Action Buttons Section -->
  <div class="e-card-actions">
    <button class="e-card-btn">Action 1</button>
    <button class="e-card-btn">Action 2</button>
  </div>
</div>

Setup in Component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true
})
export class AppComponent {}

Add CSS Theme to styles.css:

@import '../node_modules/@syncfusion/ej2-base/styles/material3.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material3.css';

---

Common Patterns

Pattern 1: Product Card with Image

Display a product with image, title, description, and action buttons:

<div class="e-card" style="max-width: 300px;">
  <div class="e-card-image" style="background-image: url('product.jpg'); height: 200px;"></div>
  <div class="e-card-header">
    <div class="e-card-header-title">Product Name</div>
  </div>
  <div class="e-card-content">Product description here</div>
  <div class="e-card-actions">
    <button class="e-card-btn">Add to Cart</button>
  </div>
</div>

Pattern 2: User Profile Card

Display user information with avatar and social actions:

<div class="e-card" style="max-width: 350px;">
  <div class="e-card-header">
    <div class="e-card-header-image" style="width: 60px; height: 60px; background-image: url('avatar.jpg');"></div>
    <div class="e-card-header-caption">
      <div class="e-card-header-title">John Doe</div>
      <div class="e-card-sub-title">Senior Developer</div>
    </div>
  </div>
  <div class="e-card-content">Bio or description text</div>
  <div class="e-card-actions">
    <button class="e-card-btn">Follow</button>
    <button class="e-card-btn">Message</button>
  </div>
</div>

Pattern 3: Horizontal Card Layout

Combine image with vertical content for compact horizontal layout:

<div class="e-card e-card-horizontal" style="max-width: 500px;">
  <img src="image.jpg" alt="Image" style="height: 200px; width: 200px;">
  <div class="e-card-stacked">
    <div class="e-card-header">
      <div class="e-card-header-title">Title</div>
    </div>
    <div class="e-card-content">Content description</div>
  </div>
</div>

---

Key Props and Classes Reference

ClassPurposeUsage
e-cardRoot containerRequired for all cards
e-card-headerHeader wrapperGroups title, subtitle, images
e-card-header-captionHeader content containerWraps titles and subtitles
e-card-header-titleMain header titleCard headline
e-card-sub-titleSubtitle textSecondary header information
e-card-header-imageHeader imageAvatar or header graphic
e-card-contentContent areaMain card body content
e-card-imageContent imageFull-width or sized images
e-card-titleImage overlay titleCaption over images
e-card-separatorVisual dividerSeparation between sections
e-card-actionsButtons containerGroups interactive elements
e-card-btnAction button styleInteractive button element
e-card-verticalVertical alignmentStack action buttons vertically
e-card-horizontalHorizontal layoutSide-by-side element arrangement
e-card-stackedVertical sectionVertical area within horizontal layout
e-card-cornerRounded cornersAdd border-radius to images

---

Component Architecture

The Card component uses a layered CSS structure:

Card Container (e-card)
├── Header Section (e-card-header) [optional]
│   ├── Header Image (e-card-header-image) [optional]
│   └── Header Caption (e-card-header-caption)
│       ├── Header Title (e-card-header-title)
│       └── Subtitle (e-card-sub-title) [optional]
├── Image Container (e-card-image) [optional]
│   └── Image Title (e-card-title) [optional]
├── Content Section (e-card-content)
├── Separator (e-card-separator) [optional]
└── Actions Container (e-card-actions) [optional]
    ├── Button (e-card-btn)
    └── Link Elements

Layout Modes:

  • Vertical (default): All elements stack vertically
  • Horizontal: Use e-card-horizontal class to arrange elements side-by-side
  • Stacked within Horizontal: Use e-card-stacked to force vertical flow in horizontal layouts

---

Common Use Cases

1. Product Catalogs: Display products with images, descriptions, and purchase buttons 2. User Profiles: Show user information with avatars and action buttons 3. Blog Posts: Create article previews with images, excerpts, and read buttons 4. Dashboard Widgets: Build dashboard cards with data and interactive elements 5. To-Do Lists: Combine cards with ListView components for task management 6. Image Galleries: Display images with captions and metadata 7. Team Members: Show staff profiles with contact and role information 8. Feature Highlights: Showcase features with icons and descriptions

---

Next Steps

Choose your learning path based on your needs:

  • New to Cards? Start with Getting Started to set up your first card
  • Building Complex Headers? Read Card Headers for advanced header patterns
  • Styling Your Cards? Check Styling and Customization for CSS techniques
  • Creating Layouts? Explore Horizontal Layout for side-by-side arrangements
  • Need Full Examples? Each reference file includes complete, copy-paste-ready code

---

Questions? Each reference file has detailed examples and edge cases. Refer to the specific topic that matches your current need.

Related skills

open.feishu.cnLark Openapi ExplorerInstantly explore, test, and generate calls against the full Lark (Feishu) OpenAPI surface without leaving their agent workflow.493klarksuiteLark EventConsume real-time events from Lark/Feishu as structured NDJSON streams inside AI agent workflows.387k16klarksuiteLark Openapi ExplorerWhen an existing Lark/Feishu skill or CLI command cannot fulfill a specific requirement and they need to discover and invoke the exact native OpenAPI endpoint.386k16kscrapegraphaiJust ScrapeQuickly search, crawl, extract structured JSON, or monitor web pages without writing custom scraping code.245k41larksuiteLark AppsQuery the current visibility and permission scope of a Lark (Feishu) app without writing HTTP client code.235k16kmattpocockDesign An InterfaceGenerate multiple radically different interface or API designs in parallel before committing to one.188k198k
Backend & APIsbackendintegrations
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.