Card
Container that groups related content and actions.
use radix_yew_themes::{
AccentColor, Avatar, Box, Card, Flex, FlexAlign, Radius, Text, TextAs, Weight,
};
use yew::prelude::*;
#[function_component]
pub fn CardExample() -> Html {
html! {
<Box max_width="240px">
<Card>
<Flex gap=3 align={FlexAlign::Center}>
<Avatar
size=3
src="https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.67&fp-y=0.5&fp-z=1.4&fit=crop"
radius={Radius::Full}
fallback="T"
/>
<Box>
<Text r#as={TextAs::Div} size=2 weight={Weight::Bold}>
{"Teodros Girmay"}
</Text>
<Text r#as={TextAs::Div} size=2 color={AccentColor::Gray}>
{"Engineering"}
</Text>
</Box>
</Flex>
</Card>
</Box>
}
}
API Reference
This component is based on the div element and supports common margin props.
| Prop | Type | Default |
|---|---|---|
as_child | Option<Callback<CardChildProps>> | - |
size | Responsive<1..5> | 1 |
variant | CardVariant | CardVariant::Surface |
Examples
As Another Element
Use the as_child prop to render the card as a link or a button. This prop adds styles for the interactive states, like hover and focus.
use radix_yew_themes::{AccentColor, Box, Card, CardChildProps, Text, TextAs, Weight};
use yew::prelude::*;
#[function_component]
pub fn CardAsAnotherElementExample() -> Html {
html! {
<Box max_width="350px">
<Card
as_child={Callback::from(|CardChildProps { class, style, .. }| html! {
<a
class={class}
style={style}
href="#"
>
<Text r#as={TextAs::Div} size=2 weight={Weight::Bold}>
{"Quick start"}
</Text>
<Text r#as={TextAs::Div} color={AccentColor::Gray} size=2>
{"Start building your next project in minutes"}
</Text>
</a>
})}
/>
</Box>
}
}
Size
Use the size prop to control the size.
use radix_yew_themes::{
AccentColor, Avatar, Box, Card, Flex, FlexAlign, FlexDirection, Radius, Text, TextAs, Weight,
};
use yew::prelude::*;
#[function_component]
pub fn CardSizeExample() -> Html {
html! {
<Flex gap=3 direction={FlexDirection::Column}>
<Box width="350px">
<Card size=1>
<Flex gap=3 align={FlexAlign::Center}>
<Avatar size=3 radius={Radius::Full} fallback="T" color={AccentColor::Indigo} />
<Box>
<Text r#as={TextAs::Div} size=2 weight={Weight::Bold}>
{"Teodros Girmay"}
</Text>
<Text r#as={TextAs::Div} size=2 color={AccentColor::Gray}>
{"Engineering"}
</Text>
</Box>
</Flex>
</Card>
</Box>
<Box width="400px">
<Card size=2>
<Flex gap=4 align={FlexAlign::Center}>
<Avatar size=4 radius={Radius::Full} fallback="T" color={AccentColor::Indigo} />
<Box>
<Text r#as={TextAs::Div} weight={Weight::Bold}>
{"Teodros Girmay"}
</Text>
<Text r#as={TextAs::Div} color={AccentColor::Gray}>
{"Engineering"}
</Text>
</Box>
</Flex>
</Card>
</Box>
<Box width="500px">
<Card size=3>
<Flex gap=4 align={FlexAlign::Center}>
<Avatar size=5 radius={Radius::Full} fallback="T" color={AccentColor::Indigo} />
<Box>
<Text r#as={TextAs::Div} size=4 weight={Weight::Bold}>
{"Teodros Girmay"}
</Text>
<Text r#as={TextAs::Div} size=4 color={AccentColor::Gray}>
{"Engineering"}
</Text>
</Box>
</Flex>
</Card>
</Box>
</Flex>
}
}
Variant
Use the variant prop to control the visual style.
use radix_yew_themes::{AccentColor, Card, CardVariant, Flex, FlexDirection, Text, TextAs, Weight};
use yew::prelude::*;
#[function_component]
pub fn CardVariantExample() -> Html {
html! {
<Flex direction={FlexDirection::Column} gap=3 max_width="350px">
<Card variant={CardVariant::Surface}>
<Text r#as={TextAs::Div} size=2 weight={Weight::Bold}>
{"Quick start"}
</Text>
<Text r#as={TextAs::Div} color={AccentColor::Gray} size=2>
{"Start building your next project in minutes"}
</Text>
</Card>
<Card variant={CardVariant::Classic}>
<Text r#as={TextAs::Div} size=2 weight={Weight::Bold}>
{"Quick start"}
</Text>
<Text r#as={TextAs::Div} color={AccentColor::Gray} size=2>
{"Start building your next project in minutes"}
</Text>
</Card>
</Flex>
}
}
With Inset Content
Use the Inset component to align content flush with the sides of the card.
use radix_yew_themes::{
Box, Card, Inset, InsetClip, InsetPadding, InsetSide, Strong, Text, TextAs,
};
use yew::prelude::*;
use yew_style::Style;
#[function_component]
pub fn CardWithInsetContentExample() -> Html {
html! {
<Box max_width="240px">
<Card size=2>
<Inset clip={InsetClip::PaddingBox} side={InsetSide::Top} pb={InsetPadding::Current}>
<img
src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80"
alt="Bold typography"
style={Style::from([
("display", "block"),
("object-fit", "cover"),
("width", "100%"),
("height", "140px"),
("background-color", "var(--gray-5)"),
])}
/>
</Inset>
<Text r#as={TextAs::P} size=3>
<Strong>{"Typography"}</Strong>{" is the art and technique of arranging type to
make written language legible, readable and appealing when displayed."}
</Text>
</Card>
</Box>
}
}