You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

@asphalt-react/card

Package Overview
Dependencies
Maintainers
6
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@asphalt-react/card

Card

2.6.0
latest
npmnpm
Version published
Weekly downloads
342
-14.71%
Maintainers
6
Weekly downloads
 
Created
Source

Card

npm npm version

A Card is container to display related pieces of information in a single unit. Cards also provide summary of the information and a linked entry point to further details of that content. Few uses of Card is to show movie titles on an OTT platform, product on an e-commerce website, feed of posts or articles on a website.

Card expands to occupy all available horizontal within its container by default, you can change it to fit the content as well. Card comes in three sizes small (s), medium (m) & large (l).

Usage

import { Card } from "@asphalt-react/card"

function App() {
  return (
    <Card>
      <div>Content</div>
    </Card>
  )
}

Variants

Card have two variants -

  • Elevated - Card appears with shadow around it, which makes it visually distinct from the container surface and has more emphasis.

  • Outlined - Card appears with border around it, has less emphasis that the elevated variant.

Card can also appears without shadow and border to have more subdued look and minimal emphasis.

If values for none of them is set, then the Card will appear in the elevated variant.

Supported intents

  • primary

  • secondary

  • tertiary

  • success

  • info

  • warning

  • danger

  • brand

  • inverse

Props

children

Node for card content.

typerequireddefault
nodetrueN/A

size

Controls size of card. Possible values are "s", "m" & "l" for small, medium & large respectively.

typerequireddefault
enumfalse"m"

outlined

Adds outline around card.

typerequireddefault
unionfalsenull

elevated

Elevates the card from the container surface.

typerequireddefault
unionfalsenull

bezel

Adds padding inside card.

typerequireddefault
boolfalsetrue

fitWidth

Adjusts the width of the card as per its content.

typerequireddefault
boolfalsefalse

primary

Applies primary intent.

typerequireddefault
boolfalsefalse

secondary

Applies secondary intent.

typerequireddefault
boolfalsefalse

tertiary

Applies tertiary intent.

typerequireddefault
boolfalsefalse

brand

Applies brand intent.

typerequireddefault
boolfalsefalse

inverse

Applies inverse intent.

typerequireddefault
boolfalsefalse

danger

Applies danger intent.

typerequireddefault
boolfalsefalse

warning

Applies warning intent.

typerequireddefault
boolfalsefalse

success

Applies success intent.

typerequireddefault
boolfalsefalse

info

Applies info intent.

typerequireddefault
boolfalsefalse

Keywords

asphalt

FAQs

Package last updated on 11 Jul 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts