ng-content-card

Introduction

ng-content-card is a standalone, reusable and customizable component for Angular 18, 19 and 20.

It is designed to work with signals and Angular zoneless, providing a lightweight, flexible, and accessible content card. It is also fully compatible with SSR, CSR and prerender.

Installation

If you want to install the latest version (currently 20):


    npm install ng-content-card

Angular 19:


    npm install ng-content-card@v19-lts

Angular 18:


    npm install ng-content-card@v18-lts

Overview

Using ng-content-card is easy:

You can add only the sections you need (using the projection attribute, such as card-header, card-image, etc.) and the card will render accordingly.
Configure its style, behavior, and accessibility using inputs..
Style it with customizable CSS variables to match your design needs.

Here’s a basic usage example:


    <ng-content-card hover="both">
  <header card-header>
    Header Content
  </header>
  <section card-image>
    <img class="scaleHover" src="assets/images/card/example-img.webp" alt="Example image">
  </section>
  <section card-body>
    Body content
  </section>
  <footer card-footer>
    Footer content
  </footer>
  <div absolute-content>
    Extra content
  </footer>
</ng-content-card>

Functionality

As shown in the example above, you can use the [isOpenSignal] input to manage your open state signal.

As shown in the example below, you just have to add content using the projection attributes: card-header, card-image, card-body, card-footer and absolute-content.

You can add only sections needed (e.g only card-image and card-footer).

slot	Description
card-header	Content to show in the header
card-image	Main image section
card-body	Main body content
card-footer	Footer content
absolute-content	Extra content with position absolute

For the main image inside card-image, you can use the provided scaleHover class for a smooth scale transition when hovering over the card.


    <section card-image>
  <img class="scaleHover" src="images/card/example-image.webp" alt="Example image">
</section>

Inputs and Outputs

Here is a list of all input/ouput:

Functionality Input

Input	Description	Default
animation	Entrance animation effect: 'translateY', 'fadeIn', 'none'	'translateY'
hover	Hover effect: 'scale', 'tone', 'both', 'none'	'scale'
shadow	Enable/disable card shadow	true

Styling

You can customize styles in three different ways:

1. Directly on the host tag


    ng-content-card {
  max-width: 280px;
  min-height: 400px;
  border: 3px solid white;
  border-radius: 3rem;
}

2. Using CSS variables


    ng-content-card {
  --card-bg: white;
  --card-fg: black;
}

Variable	Description	Default
--card-bg	Background color of the entire card	white	General
--card-fg	Foreground (text) color of the card	black	General
--card-section-padding	Internal padding for each section (header, body, footer)	16px	General
--card-image-padding-x	Horizontal padding for the image container	0px	General
--card-footer-border-top	Top border of the footer section	0px solid currentColor	General
--card-hover-velocity	Transition duration applied on hover	.3s	Hover
--card-hover-scale	Scale factor when hovering (if hover='scale')	1.03	Hover
--card-hover-bg	Background color on hover (if hover='color' or 'both')	color-mix(in srgb, var(--card-bg) 70%, #999999 30%)	Hover
--card-hover-fg	Foreground/text color on hover (if hover='color' or 'both')	var(--card-fg)	Hover
--card-animation-delay	Delay before the entrance animation starts	0s	Animation
--card-animation-velocity	Duration of the entrance animation	1s	Animation
--card-shadow	Box-shadow applied when shadow=true	3px 3px 20px color-mix(in srgb, var(--card-fg) 60%, #999999 40%)	Shadow
--card-header-bg	Background color of the header section	transparent	Sections
--card-image-bg	Background color of the image section	transparent	Sections
--card-body-bg	Background color of the body section	transparent	Sections
--card-footer-bg	Background color of the footer section	transparent	Sections
--card-header-text-color	Text color inside the header section	inherit	Sections
--card-body-text-color	Text color inside the body section	inherit	Sections
--card-footer-text-color	Text color inside the footer section	inherit	Sections

3. Styling sections directly


    ng-content-card [card-header] {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

ng-content-card [card-header] img {
  width: 50px;
  border-radius: 50%;
}

ng-content-card [card-footer] {
  display: flex;
  column-gap: 0.5rem;
  justify-content: end;
}

Accessibility

Since the content within the card is entered externally, you must manage the accessibility of the entered items yourself, if necessary.