npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@3mo/collapsible-card

v0.2.2

Published

A web component for cards whose body collapses and expands from a toggle in the header.

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

manuelmolickimanuelmolickiarshia11darshia11djulian.molickijulian.molickiavorobiov_artelogicavorobiov_artelogic

Keywords

litweb-componentmaterialcardcollapsible

Readme

Collapsible Card

A web component for cards whose body collapses and expands from a toggle in the header.

npm Documentation

A card whose body collapses down to its header with a toggle button.

Installation

npm install @3mo/collapsible-card
import '@3mo/collapsible-card'

Usage

<mo-collapsible-card heading='Order #24080' subHeading='Serenity Freight'>
	Twelve steel plates and four tubes of weld seam sealant, shipped from Toronto on Monday. Delivery is expected within five working days.
</mo-collapsible-card>

Examples

  • Sub Heading When Collapsed — With showSubHeadingOnlyWhenCollapsed the sub-heading appears only while collapsed, as a summary of the hidden body - expand the card to see it go.
  • Disable Collapse — disableCollapse disables the toggle, keeping the card expanded or collapsed as it is.
  • Fixed Height — With a height of its own the body fills it, and collapsing gives the height up down to the header.
  • Subclassing — A subclass can render more into the card, such as a line between the header and the body, which keeps its place while the body collapses.
  • Custom Properties — --mo-collapsible-card-transition-duration sets how long collapsing takes, one second here, and 0s turns the animation off.

API

mo-collapsible-card

Properties

| Name | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | collapsed | collapsed | boolean | false | Whether the body is collapsed | | disableCollapse | disableCollapse | boolean | false | Disables the toggle, keeping the card in its current state | | showSubHeadingOnlyWhenCollapsed | showSubHeadingOnlyWhenCollapsed | boolean | false | Shows the sub-heading only while the card is collapsed | | type | type | CardType | "filled" | Whether the card is filled with a shadow or outlined with a border | | heading | heading | string \| undefined | | The heading in the header | | subHeading | subHeading | string \| undefined | | The secondary line below the heading | | avatar | avatar | string \| undefined | | The text shown in the avatar circle of the header | | image | image | string \| undefined | | The URL of an image shown above the header |

Events

| Name | Detail | Description | | --- | --- | --- | | collapse | boolean | Dispatched when the card is collapsed or expanded |

Slots

| Name | Description | | --- | --- | | action | Actions in the header | | heading | Custom heading in the header | | subHeading | Custom subHeading in the header | | avatar | Custom avatar in the header | | header | Replaces the whole header, including the heading, subHeading, avatar and action slots | | media | Embedded media | | (default) | Body / Content | | footer | Actions in the footer |

CSS custom properties

| Name | Description | | --- | --- | | --mo-collapsible-card-transition-duration | The duration of the collapse and expand animation; "0s" turns it off | | --mo-card-header-padding | Padding of the header | | --mo-card-avatar-background | Color of the avatar | | --mo-card-avatar-color | Text color of the avatar | | --mo-card-body-padding | Padding of the body | | --mo-card-footer-padding | Padding of the footer |

CSS parts

| Name | Description | | --- | --- | | media | Embedded media | | header | The header | | avatar | The avatar | | heading | The heading | | subHeading | The subHeading | | footer | The footer |

Links

License

MIT © 3MO GmbH