Thumbnail Card

The following is a Thumbnail style card using flex.


Long title Long title Long title Long title Long title Long title Long title Long title
Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.
Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.
Long title Long title Long title Long title Long title Long title Long title Long title
@https://uiux.cc
Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.

Gallery Card

The following is a gallery style card using flex.











Author Card

Author Card is a very popular used web page element that can display a lot of key information.


Full-stack Designer

@https://uiux.cc
Hi. I'm a full-stack designer on the way of pursuing the dream. Focus on user interface, user experience, awesome websites, front-end and WordPress development. I want to build things I can be proud of. I approach some awesome design challenges with an eye on the latest trends and strive to align my work the industry current best practices, while leveraging the acquired experience on the field. I have been working so hard to build up self. My personal website: https://uiux.cc

Full-stack Designer

@https://uiux.cc
  • 223

    Web Design
  • 13

    UI
  • 5

    SEO

Hi. I'm a full-stack designer on the way of pursuing the dream. Focus on user interface, user experience, awesome websites, front-end and WordPress development.

Revenue

$34,245


Last 24 Hours

API


Card

import Card from '@uixkit.react/components/Card/index.tsx';
PropertyTypeDefaultDescription
typethumb | gallery-v-img | gallery-v-custom | gallery-h-img | gallery-full-info | gallery-icon | gallery-icon-abreast | authorcard-line | authorcard-detail | authorcard-stats-Card display style
btnIconReactNode-Button Icon
titlestring-Title of card
titleEllipsisbooleanfalseOmit overflowed title string
subTitleReactNode | string-Hyperlink or subtitle of card
bgConfigJSON Object Literals-The attributes of the background image, use JSON string format. Such as:
{"src":"assets/images/demo.jpg"}{"src":"assets/images/demo.jpg","position":"center center","size":"cover","repeat":"no-repeat","fill":false}
contentRationumber-The ratio of the content, used for horizontal gallery style. For gallery-h-*, gallery-full-*
iconReactNode-Primary Icon. For gallery-icon-*
overlayAreaReactNode-Overlay the content on the card background. For gallery-v-*
verticalCenterbooleanfalseVertically center text. For gallery-full-*
avatarstring-Avatar URL. For thumb, authorcard-*
btnClickEventfunction-Handling events for button
btnHyperlinkClickEventfunction-Handling events for anchor link