CardView in IOS (Swift & SwiftUI)

The card view is one of the very usable components in the development of Mobile Apps, Softwares, and Websites, etc. Today I will show you how to create a card view in IOS by using the Swift & SwiftUI. Read the complete blog for a better understanding.


Create the project by using the SwiftUI into the project like this


Here I am using SDWebImageSwiftUI for using the image into the card. If you want to add this to the project then click the link below.


Now create a view which is called the CardView like below and define some let constants which will use for framing in the next part of the code.


After this, now use a ZStack into the body variable and then use a RoundedRectangle

In this code, the ZStack is like (putting the plate into one by one like a stack) view stack. RoundedRectangle is for putting the Rectangle in the back of the CardView. In RoundedRectangle, we are using the three modifiers.

  • .strokeBorder is using for giving the border to the rectangle like here we are giving the Gray color with border width 1.
  • which we already defined in.frame is to control the cardAndImageWidth & height is the cardHeight let constants in Step-3. height or width of the Rectangle. Here card width is the
  • .background is for giving the background color to the Rectangle.


After that use the VStack under the RoundedRectangle with frame and corner radius

.cornerRadius is for the radius from the corner of the VStack boundary.


After that, Import the SDWebImageSwiftUI by using

If you added SDWebImageSwiftUI into your project then you can import this otherwise cannot import this. See Step-2 for adding this into the project.


After that use WebImage into that VStack

WebImage is the component of SDWebImageSwiftUI. The WebImage will take the URL type url and show the image onto the screen.


  • .resizable() is for resizing the image. If you will not use this then you cannot resize the image. So it’s very important.
  • .aspectRatio is for fill this image into the parent view or not.
  • .frame is for the size of the image
  • .clipped() is clipping the image into the boundary of the parent view.


After that use VStack below the WebImage

Here I am just showing the two texts vertically and giving the custom font, size, weight & color, etc.

Complete Code:

Now use this CardView any place where you want into the

If you have any doubt then comment below. Thanks for reading this 🙇‍♂️! :)

Originally published at

I am a professional software engineer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store