Card
A card that contains three optional slots; a header, a body and a footer.
Information
Example
A title for the card
This is a card with a title, some text and a button. The header with the title and the footer with the button are not required. You can have everything inside the body where this text is if you want to.
Dark
A title for the card
This is a card with a title, some text and a button. The header with the title and the footer with the button are not required. You can have everything inside the body where this text is if you want to.
Accent Left
A title for the card
This is a card with a title, some text and a button. The header with the title and the footer with the button are not required. You can have everything inside the body where this text is if you want to.
Accent Top
A title for the card
This is a card with a title, some text and a button. The header with the title and the footer with the button are not required. You can have everything inside the body where this text is if you want to.
Brushed Metal - Blue
A title for the card
This is a card with a title, some text and a button. The header with the title and the footer with the button are not required. You can have everything inside the body where this text is if you want to.
Brushed Metal - Default
A title for the card
This is a card with a title, some text and a button. The header with the title and the footer with the button are not required. You can have everything inside the body where this text is if you want to.
Brushed Metal - Gold
A title for the card
This is a card with a title, some text and a button. The header with the title and the footer with the button are not required. You can have everything inside the body where this text is if you want to.
Properties
| Property | Type | Default |
|---|---|---|
| Width | string | "auto" |
| Minimum width | string | "0px" |
| Maximum width | string | "none" |
| Height | string | "auto" |
| Minimum height | string | "0px" |
| Maximum height | string | "none" |
| Overflow | enum<string> | "visible" |
| Overflow X | string | "visible" |
| Overflow Y | string | "visible" |
| Aspect ratio | string | "auto" |
| Flexbox direction | enum<string> | "column" |
| Align items along the cross axis | enum<string> | "stretch" |
| Justify content along the main axis | enum<string> | "stretch" |
| Flexbox grow | string | "1" |
| Element | enum<string> | "div" |
| Position | enum<string> | "relative" |
| Top | string | "auto" |
| Right | string | "auto" |
| Bottom | string | "auto" |
| Left | string | "auto" |
| Z-index | string | "auto" |
| Transform | string | "none" |
| Transform origin | string | "center" |
| Text align | enum<string> | "left" |
| Width - Header | string | "auto" |
| Height - Header | string | "auto" |
| Flexbox direction - Header | enum<string> | "row" |
| Align items along the cross axis - Header | enum<string> | "center" |
| Justify content along the main axis - Header | enum<string> | "stretch" |
| Flexbox grow - Header | string | "0" |
| Gap - Header | string | "1rem" |
| Padding - Header | string | "1.5rem" |
| Width - Body | string | "auto" |
| Height - Body | string | "auto" |
| Flexbox direction - Body | enum<string> | "column" |
| Align items along the cross axis - Body | enum<string> | "stretch" |
| Justify content along the main axis - Body | enum<string> | "stretch" |
| Flexbox grow - Body | string | "1" |
| Gap - Body | string | "1rem" |
| Padding - Body | string | "1.5rem" |
| Width - Footer | string | "auto" |
| Height - Footer | string | "auto" |
| Flexbox direction - Footer | enum<string> | "row" |
| Align items along the cross axis - Footer | enum<string> | "center" |
| Justify content along the main axis - Footer | enum<string> | "stretch" |
| Flexbox grow - Footer | string | "0" |
| Gap - Footer | string | "1rem" |
| Padding - Footer | string | "1.5rem" |
| Padding - Before | string | "0px" |
| Inset - Before | string | "0" |
| Background | string | "none" |
| Background color | string | "var(--ophixor-semantic-surface-base)" |
| Background color - Hover | string | "var(--ophixor-semantic-surface-base)" |
| Color | string | "var(--ophixor-semantic-text-primary)" |
| Color - Hover | string | "var(--ophixor-semantic-text-primary)" |
| Cursor | string | "auto" |
| Background image | string | "none" |
| Background size | string | "auto" |
| Background position | string | "center" |
| Background repeat | string | "repeat" |
| Background blend mode | string | "normal" |
| Background color - Header | string | "var(--ophixor-semantic-surface-base)" |
| Background color - Header - Hover | string | "var(--ophixor-semantic-surface-base)" |
| Background color - Body | string | "var(--ophixor-semantic-surface-base)" |
| Background color - Body - Hover | string | "var(--ophixor-semantic-surface-base)" |
| Background color - Footer | string | "var(--ophixor-semantic-surface-base)" |
| Background color - Footer - Hover | string | "var(--ophixor-semantic-surface-base)" |
| Border width | string | "1px" |
| Border top width | string | "1px" |
| Border right width | string | "1px" |
| Border bottom width | string | "1px" |
| Border left width | string | "1px" |
| Border color | string | "var(--ophixor-semantic-border-default)" |
| Border color - Hover | string | "var(--ophixor-semantic-border-default)" |
| Border radius | string | "6px" |
| Outline | string | "none" |
| Outline offset | string | "0" |
| Box shadow | string | "var(--ophixor-semantic-shadow-medium)" |
| Box shadow - Hover | string | "var(--ophixor-semantic-shadow-medium)" |
| Transform - Hover | string | "none" |
| Transition | string | "none" |
| Opacity | string | "1" |
| Filter | string | "none" |
| Backdrop filter | string | "none" |
| Background - Before | string | "none" |
| Mask - Before | string | "none" |
| Mask composite - Before | string | "add" |
| Is visible | boolean | true |
| Selectors | array | [] |
Variants
| Variant | Description |
|---|---|
| Flat | Coming soon... |
| Outlined | Coming soon... |
| Elevated | Coming soon... |
| Soft | Coming soon... |
| Glass | Coming soon... |
| Dark | Coming soon... |
| Compact | Coming soon... |
| Spacious | Coming soon... |
| Horizontal | Coming soon... |
| Centered | Coming soon... |
| Image Card | Coming soon... |
| Dashboard Tile | Coming soon... |
| Clickable | Coming soon... |
| Accent Left | Coming soon... |
| Accent Top | Coming soon... |
| Modal | Coming soon... |
| Floating Panel | Coming soon... |
| Scrollable | Coming soon... |
| Media Overlay | Coming soon... |
| Brushed Metal - Blue | Coming soon... |
| Brushed Metal - Blue - Dark | Coming soon... |
| Brushed Metal - Default | Coming soon... |
| Brushed Metal - Gold | Coming soon... |
| Brushed Metal - Gold - Dark | Coming soon... |