Top 5 Features of .NET MAUI Cards

[{"selector":"#anim-62291cd1-957f-4240-8586-3555c4d6dca0","keyframes":{"opacity":[0,1]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-2bfb6192-e594-4d7b-b536-928a4678ca1c","keyframes":{"transform":["scale(0.3333333333333333)","scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-c685de25-adc4-43c7-8f80-c8d142f2a9d8","keyframes":{"transform":["translate3d(-126.14842%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d777fccb-716b-43bb-b3d8-27fe3cbac0c5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-04a2a7cd-a4ec-4581-9e2c-4a965710f1f7","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] · Card layout · Swiped cards at the edge · Dismissible cards · Border customization · Corner radius

Card layout

[{"selector":"#anim-d75279b9-f3c5-4e15-9f52-e4d6f8d0f500","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d67879f9-4cc1-4105-99cd-776343a41bd7","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-29b48ed6-fa58-4f4e-8c10-d9016777509b","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-a2e0110a-d0bb-4a5e-8e23-3718661d9d84","keyframes":{"transform":["translate3d(-116.83501%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d6d5b196-6cbd-48d1-9c2a-bd4118fe8393","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4b621581-626f-4633-8133-41d983b46391","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Add a dynamic set or stack of cards to your app. In a stack, only the top card is fully visible, and it’s up to the user to swipe to the next one. Cards can be swiped to the left, right, top, or bottom of the layout.

Swiped cards at the edge

[{"selector":"#anim-86ea9a90-a01e-4485-b87a-6edf9184f6ba","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-addc7a87-003f-41c2-b22c-5955654f5e7b","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8a4daa8f-4e8d-47d2-a810-a14d33207462","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-6a96cba3-24e4-49e4-8cbf-d4822e1501b4","keyframes":{"transform":["translate3d(-115.97444%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a1b2cba8-e47f-416f-90d8-ec427a05fc84","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0e45f1e3-25bd-45cb-b89c-78e8283c3c50","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Swiped cards are visually indicated at the edge of the layout to show they have already been swiped from the stack.

Dismissible cards

[{"selector":"#anim-16509e5e-8652-428c-a9c2-a1e3a0eaf52b","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-23e14afb-ac68-407b-9780-fc25da48c2f4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-be208a88-5746-4542-a243-966c1ffc93e4","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-33ce7b69-f31c-40ae-ac73-6a59e6f6270b","keyframes":{"transform":["translate3d(-115.97444%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1bd18db2-7067-45a9-9ae9-6ea1d8715141","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-df06da1b-8347-49ce-a01e-c9f5004d9a30","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Easily dismiss cards by swiping and implement a smooth fade-out effect as the card is dismissed from view.

Border customization

[{"selector":"#anim-89e0f4eb-757c-4179-9206-290bd9787bda","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2b761391-2e67-41fa-aa6f-82007070ee65","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8390b1a1-fea9-4f41-9592-2e64980b06c1","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-e40cd8b7-7824-42f8-aad4-2992369525ad","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1f1bb7fd-e4a9-496e-9f65-1daf2638deb5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-31b9df00-deed-425e-b487-617db87165aa","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Customize the border of a card to your preferred color and thickness.

Corner radius

[{"selector":"#anim-07e972b1-d75f-45b9-99af-bbf1ae088201","keyframes":{"transform":["translate3d(-116.44736%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d15bfdad-39ad-468f-8293-4eba011ffd7a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c02b918a-bad7-4be2-92f7-f2f49c02c14b","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] [{"selector":"#anim-95f9b9ba-234d-47e3-8496-403118fca583","keyframes":{"transform":["translate3d(-117.18213%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0e2bf319-25c7-41ec-b490-892b67ca703a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ec7b7ae0-6818-4bb0-bc7e-c96c49a7bf38","keyframes":{"transform":["scale(0.15)","scale(1)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.4, 0.4, 0.0, 1)","fill":"forwards"}] Customize the corner radius of cards to achieve rounded edges. Set a different radius for each corner with ease.

Syncfusion .NET MAUI Cards

[{"selector":"#anim-8ab5a740-462d-4335-a7c2-4ff9d942049c","keyframes":[{"transform":"scale(1)","offset":0},{"transform":"scale(1.5)","offset":0.33},{"transform":"scale(0.95)","offset":0.66},{"transform":"scale(1)","offset":1}],"delay":1,"duration":1450,"easing":"ease-in-out","fill":"both","iterations":1}] The Syncfusion .NET MAUI Cards control allows you to craft dismissible cards or a stack of cards. Navigate through the stack by swiping to unveil the next card in the sequence. No credit card required.