Card

The Card component provides a flexible container for displaying content. Six variants (filled, outline, elevated, subtle, ghost, gradient) each set their own background + default shadow. withBorder, borderColor, borderWidth, and bg compose on top of any variant, so you can mix and match (<Card variant="elevated" withBorder bg="primary" />) without forking a new variant for every combination.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽²⁾

Properties

⁽³⁹⁾

Playground

Basics

Compose card content with spacing primitives and a primary action for quick scenarios.

Loading demo…

import
 
{
 
Block
,
 
Button
,
 
Card
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Card
 
p
=
"lg"
 
radius
=
"lg"
 
shadow
=
"md"
 
maxW
=
{
320
}
>
      
<Block
>
        
<Block
>
          
<Text
 
variant
=
"small"
 
color
=
"muted"
>
            
Upcoming
 match
          
</Text
>
          
<Text
 
variant
=
"h6"
>
Falcons
 at 
Bears
</Text
>
        
</Block
>
        
<Text
 
color
=
"muted"
>
          
Kickoff
 is set 
for
 
7
:
30
 
PM
 with rain in the forecast
.
 
Review
 the lineup and
          travel logistics before departure
.
        
</Text
>
  
<Button
 
size
=
"sm"
 
variant
=
"filled"
 
onPress
=
{
(
)
 
=>
 
{
}
}
>
          
View
 itinerary
        
</Button
>
      
</Block
>
    
</Card
>
  
)
;
}

Variants

Tour the available card variant treatments to pick the right surface style for your layout.

Loading demo…

import
 
{
 
Block
,
 
Card
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
VARIANTS
 
=
 
[
'filled'
,
 
'outline'
,
 
'elevated'
,
 
'subtle'
,
 
'ghost'
,
 
'gradient'
]
 as 
const
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
>
      
{
VARIANTS
.
map
(
(
variant
)
 
=>
 
(
        
<Card
 
key
=
{
variant
}
 
variant
=
{
variant
}
 
p
=
"lg"
 
radius
=
"lg"
>
          
<Block
>
            
<Text
 
variant
=
"small"
 
color
=
"muted"
>
              
{
String
(
variant
)
.
toUpperCase
(
)
}
 variant
            
</Text
>
            
<Text
 
color
=
"muted"
>
              
Apply
 the 
{
variant
}
 treatment to match surface contrast needs
.
            
</Text
>
          
</Block
>
        
</Card
>
      
)
)
}
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Card

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap