
Product
Introducing Scala and Kotlin Support in Socket
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
@asphalt-react/card
Advanced tools
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).
import { Card } from "@asphalt-react/card"
function App() {
return (
<Card>
<div>Content</div>
</Card>
)
}
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.
primary
secondary
tertiary
success
info
warning
danger
brand
inverse
Node for card content.
type | required | default |
---|---|---|
node | true | N/A |
Controls size of card. Possible values are "s", "m" & "l" for small, medium & large respectively.
type | required | default |
---|---|---|
enum | false | "m" |
Adds outline around card.
type | required | default |
---|---|---|
union | false | null |
Elevates the card from the container surface.
type | required | default |
---|---|---|
union | false | null |
Adds padding inside card.
type | required | default |
---|---|---|
bool | false | true |
Adjusts the width of the card as per its content.
type | required | default |
---|---|---|
bool | false | false |
Applies primary intent.
type | required | default |
---|---|---|
bool | false | false |
Applies secondary intent.
type | required | default |
---|---|---|
bool | false | false |
Applies tertiary intent.
type | required | default |
---|---|---|
bool | false | false |
Applies brand intent.
type | required | default |
---|---|---|
bool | false | false |
Applies inverse intent.
type | required | default |
---|---|---|
bool | false | false |
Applies danger intent.
type | required | default |
---|---|---|
bool | false | false |
Applies warning intent.
type | required | default |
---|---|---|
bool | false | false |
Applies success intent.
type | required | default |
---|---|---|
bool | false | false |
Applies info intent.
type | required | default |
---|---|---|
bool | false | false |
FAQs
Card
The npm package @asphalt-react/card receives a total of 182 weekly downloads. As such, @asphalt-react/card popularity was classified as not popular.
We found that @asphalt-react/card demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
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.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.
Application Security
/Security News
Socket CEO Feross Aboukhadijeh and a16z partner Joel de la Garza discuss vibe coding, AI-driven software development, and how the rise of LLMs, despite their risks, still points toward a more secure and innovative future.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.