PHPackages                             techdivision/card - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Search & Filtering](/categories/search)
4. /
5. techdivision/card

ActiveNeos-package[Search & Filtering](/categories/search)

techdivision/card
=================

Card / Teaser NodeTypes for Neos CMS - Content Cards (edit in-place), Document Cards (reference to a document) and Social Cards (links to external websites)

v2.1.0(2y ago)73.9k21GPL-3.0-or-laterPHP

Since Oct 4Pushed 2y ago17 watchersCompare

[ Source](https://github.com/techdivision/card)[ Packagist](https://packagist.org/packages/techdivision/card)[ RSS](/packages/techdivision-card/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (9)Dependencies (3)Versions (16)Used By (1)

Welcome to the Card family!
===========================

[](#welcome-to-the-card-family)

[![](https://github.com/techdivision/card-documentation-assets/raw/master/assets/Logo.png)](https://github.com/techdivision/card-documentation-assets/raw/master/assets/Logo.png)

Available Card Packages
[Card - the basics](https://github.com/techdivision/card)
[Card decks - aggregate cards beautifully](https://github.com/techdivision/card-decks)
[Card shuffle - deck filtering](https://github.com/techdivision/card-shuffle)
[Bootstrap 4 styling for cards](https://github.com/techdivision/card-bootstrap4)
[Materialize styling for cards](https://github.com/techdivision/card-materialize)

TechDivision.Card - Cards for structuring information
=====================================================

[](#techdivisioncard---cards-for-structuring-information)

> Use this package if you
>
> - only want the very basic card features
> - know how to apply css classes and styling on your own

Cards are one of the primary means of structuring information on a website clearly, distinctly and mobile-friendly. They actually are the modern way of what has been called "teaser", "box" et al. in the past. This package integrates cards into neos in a way that is easy to use and splitted into some packages, so that you only have to install what you need.

[![Card examples](https://github.com/techdivision/card-documentation-assets/raw/master/assets/card/TechDivisionCard.png)](https://github.com/techdivision/card-documentation-assets/raw/master/assets/card/TechDivisionCard.png)

### Resources:

[](#resources)

For editors
-----------

[](#for-editors)

When installed, TechDivision.Card comes with two new NodeTypes - and a new editing mode.

### Content Cards

[](#content-cards)

Content Cards are plain content NodeTypes. They are not for reuse but have a card look and feel. It can be used e.g. to show different product features.
[![Content Card example](https://github.com/techdivision/card-documentation-assets/raw/master/assets/card/ContentCard.gif)](https://github.com/techdivision/card-documentation-assets/raw/master/assets/card/ContentCard.gif)

### Document Cards

[](#document-cards)

Document Cards are basically references to other pages and are highly reusable.
You cannot edit information here, but in the document itself.
This can be easily used to improve in-site-navigation by putting together document cards that introduce your products and link to them on different places within your website - but keep your data centralized.
[![Document Card example](https://github.com/techdivision/card-documentation-assets/raw/master/assets/card/DocumentCard.gif)](https://github.com/techdivision/card-documentation-assets/raw/master/assets/card/DocumentCard.gif)

### Social Cards

[](#social-cards)

Social Cards are links to other websites that carry either [opengraph](https://ogp.me/) or [twittercard](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards) meta information.
The card will display an image, title and description and link over to the page.
We do not set target \_blank, but we do add a [noopener attribute](https://developers.google.com/web/tools/lighthouse/audits/noopener) if you plan to add a target yourself.
You can easily use this to link to newspapers, github or other pages connected with your website.
[![Social Card example](https://github.com/techdivision/card-documentation-assets/raw/master/assets/card/SocialCard.gif)](https://github.com/techdivision/card-documentation-assets/raw/master/assets/card/SocialCard.gif)

### Card Mode

[](#card-mode)

In order to edit your cards, there is a new editing mode where you can preview your document card in different sizes.
[![Card editing mode](https://github.com/techdivision/card-documentation-assets/raw/master/assets/card/CardMode.gif)](https://github.com/techdivision/card-documentation-assets/raw/master/assets/card/CardMode.gif)

For Developers
--------------

[](#for-developers)

### Installation

[](#installation)

TechDivision.Card is available via packagist. Add `"techdivision/card" : "~1.0"` to the require section of the composer.json or run `composer require techdivision/card`.
**This only installs the very basic card features. If you dont know what you do, we recommend using one of the other card packages instead.**

### Configuration

[](#configuration)

There is not much to configure, as TechDivision.Card runs out of the box. A few options are:

### NodeTypes Diagramm

[](#nodetypes-diagramm)

This is an overview over the NodeTypes and how they work together: [![NodeTypes Diagramm](https://github.com/techdivision/card-documentation-assets/raw/master/assets/card/NodeTypeDiagramm.jpg)](https://github.com/techdivision/card-documentation-assets/raw/master/assets/card/NodeTypeDiagramm.jpg)

#### Adding/Removing the CardMixin

[](#addingremoving-the-cardmixin)

By default, we add the Mixin to `Neos.NodeTypes:Page` - so that you can start working.
If you do not want this behavior, use the following code:

```
Neos.NodeTypes:Page:
  superTypes:
    'TechDivision.Card:CardMixin': false

```

If you have your own Document NodeType, add the Mixin as follows:

```
Your.Awesome.Package:SpecialDocumentNode:
  superTypes:
    'TechDivision.Card:CardMixin': true
    'TechDivision.Card:Constraint.Card.Document': true

```

The NodeType `TechDivision.Card:Constraint.Card.Document` is used for references and other constraints.

#### Add your own CardMode stylesheets

[](#add-your-own-cardmode-stylesheets)

The CardMode contains very basic styling. Feel free to add your own:

```
prototype(TechDivision.Card:CardModePage) {
    head.stylesheets.cardModeStylesheet.stylesheet.path = 'resource://Your.Awesome.Package/Public/Styles/CardMode.css'
}

```

### Develop your own styles

[](#develop-your-own-styles)

We added a set of afx-augmenters that you can use to easily change card styles.
Best practice is to create your own package that overrides styles and components as you need.
Put your `techdivision/card*` dependencies into that package's composer.json.

[Look here to see an example](https://github.com/techdivision/card-materialize)

### Contribution

[](#contribution)

We will be happy to receive pull requests - dont hesitate!

###  Health Score

36

—

LowBetter than 82% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity26

Limited adoption so far

Community22

Small or concentrated contributor base

Maturity66

Established project with proven stability

 Bus Factor1

Top contributor holds 55.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~209 days

Recently: every ~364 days

Total

9

Last Release

743d ago

Major Versions

v1.0.5 → v2.0.02021-10-14

### Community

Maintainers

![](https://www.gravatar.com/avatar/343dcb03a86553b7ba1c14aa008fe22edf0d960048cf97eb9ea1351e03e29f48?d=identicon)[mwitte](/maintainers/mwitte)

![](https://www.gravatar.com/avatar/e2402ac081fc0dc57b15f8cfcc16a1c1b37adfa3211a7fe30eb80d622b6586f3?d=identicon)[regniets](/maintainers/regniets)

---

Top Contributors

[![regniets](https://avatars.githubusercontent.com/u/4123716?v=4)](https://github.com/regniets "regniets (10 commits)")[![SimonPaidla](https://avatars.githubusercontent.com/u/28459705?v=4)](https://github.com/SimonPaidla "SimonPaidla (5 commits)")[![dboeck](https://avatars.githubusercontent.com/u/6573641?v=4)](https://github.com/dboeck "dboeck (1 commits)")[![FlorianHartl](https://avatars.githubusercontent.com/u/15820459?v=4)](https://github.com/FlorianHartl "FlorianHartl (1 commits)")[![mwitte](https://avatars.githubusercontent.com/u/1611200?v=4)](https://github.com/mwitte "mwitte (1 commits)")

---

Tags

neosfiltercardNeosteasernodetypes

### Embed Badge

![Health badge](/badges/techdivision-card/health.svg)

```
[![Health](https://phpackages.com/badges/techdivision-card/health.svg)](https://phpackages.com/packages/techdivision-card)
```

###  Alternatives

[clue/stream-filter

A simple and modern approach to stream filtering in PHP

1.7k261.7M7](/packages/clue-stream-filter)[laminas/laminas-filter

Programmatically filter and normalize data and files

9528.0M150](/packages/laminas-laminas-filter)[outl1ne/nova-detached-filters

This Laravel Nova package allows you to detach filters from the filter dropdown

64343.5k](/packages/outl1ne-nova-detached-filters)[optimistdigital/nova-detached-filters

This Laravel Nova package allows you to detach filters from the filter dropdown

64235.5k](/packages/optimistdigital-nova-detached-filters)[nrml-co/nova-big-filter

A nice looking filter menu thats always open.

35310.9k](/packages/nrml-co-nova-big-filter)[awesome-nova/filter-card

A Laravel Nova card.

25126.1k](/packages/awesome-nova-filter-card)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)