CardShells - UIFort

Bottom Border Accent

A card shell featuring a distinctive accent on the bottom border.

Source code

The source code for BottomBorderAccent can be found at the following location, inside the downloaded package:

Live preview:

Composed Large

A large card shell with a composed layout for various content types.

Source code

The source code for ComposedLarge can be found at the following location, inside the downloaded package:

Live preview:

Composed Large Alternate

An alternative layout for the large composed card shell.

Source code

The source code for ComposedLargeAlternate can be found at the following location, inside the downloaded package:

Live preview:

Composed Large Stacked

A large composed card shell with a stacked layout design.

Source code

The source code for ComposedLargeStacked can be found at the following location, inside the downloaded package:

Live preview:

Content Scrollable

A card shell with scrollable content.

Source code

The source code for ContentScrollable can be found at the following location, inside the downloaded package:

Live preview:

Content Scrollable Custom

A card shell with scrollable content with custom scrollbar.

Source code

The source code for ContentScrollableCustom can be found at the following location, inside the downloaded package:

Live preview:

Content Scrollable Footer

A card shell with scrollable content and a footer.

Source code

The source code for ContentScrollableFooter can be found at the following location, inside the downloaded package:

Live preview:

Content Scrollable Footer Well

A card shell with scrollable content and a footer on a gray background.

Source code

The source code for ContentScrollableFooterWell can be found at the following location, inside the downloaded package:

Live preview:

Content Scrollable Section

A card shell with scrollable content and an additional section.

Source code

The source code for ContentScrollableSection can be found at the following location, inside the downloaded package:

Live preview:

Content Scrollable Section Well

A card shell with scrollable content and a section on a gray background.

Source code

The source code for ContentScrollableSectionWell can be found at the following location, inside the downloaded package:

Live preview:

Dark Background

A card shell with a dark background for a sleek, modern look.

Source code

The source code for DarkBackground can be found at the following location, inside the downloaded package:

Live preview:

Footer

A card shell with a footer.

Source code

The source code for Footer can be found at the following location, inside the downloaded package:

Live preview:

Footer Divider Well

A card shell with a footer on a gray background, separated by a divider.

Source code

The source code for FooterDividerWell can be found at the following location, inside the downloaded package:

Live preview:

Footer Well

A card shell with a footer on a gray background.

Source code

The source code for FooterWell can be found at the following location, inside the downloaded package:

Live preview:

Gradient Background

A card shell with a gradient background for a dynamic visual effect.

Source code

The source code for GradientBackground can be found at the following location, inside the downloaded package:

Live preview:

Header

A card shell with a header.

Source code

The source code for Header can be found at the following location, inside the downloaded package:

Live preview:

Header Footer

A card shell with both a header and footer.

Source code

The source code for HeaderFooter can be found at the following location, inside the downloaded package:

Live preview:

Header Well

A card shell with a header on a gray background.

Source code

The source code for HeaderWell can be found at the following location, inside the downloaded package:

Live preview:

Header Well Divider

A card shell with a header on a gray background, separated by a divider.

Source code

The source code for HeaderWellDivider can be found at the following location, inside the downloaded package:

Live preview:

Header Well Scrollable Search

A card shell with a header on a gray background and a scrollable search area.

Source code

The source code for HeaderWellScrollableSearch can be found at the following location, inside the downloaded package:

Live preview:

Left Indicator Accent

A card shell featuring a left-side indicator accent for emphasis or categorization.

Source code

The source code for LeftIndicatorAccent can be found at the following location, inside the downloaded package:

Live preview:

Simple

A basic card shell.

Source code

The source code for Simple can be found at the following location, inside the downloaded package:

Live preview:

Top Border Accent

A card shell featuring a top border accent for added visual interest.

Source code

The source code for TopBorderAccent can be found at the following location, inside the downloaded package:

Card Shells

View our card shells that provide a basic structure for content, ideal for creating a uniform and organized layout.

Bottom Border Accent

Live preview:

Composed Large

Live preview:

Composed Large Alternate

Live preview:

Composed Large Stacked

Live preview:

Content Scrollable

Live preview:

Content Scrollable Custom

Live preview:

Content Scrollable Footer

Live preview:

Content Scrollable Footer Well

Live preview:

Content Scrollable Section

Live preview:

Content Scrollable Section Well

Live preview:

Dark Background

Live preview:

Footer

Live preview:

Footer Divider Well

Live preview:

Footer Well

Live preview:

Gradient Background

Live preview:

Header

Live preview:

Header Footer

Live preview:

Header Well

Live preview:

Header Well Divider

Live preview:

Header Well Scrollable Search

Live preview:

Left Indicator Accent

Live preview:

Simple

Live preview:

Top Border Accent

Live preview: