Now, let's take a look at the UI of the card modal window. Figure 13.1 shows its UI design:

As you can see, the card opened in a modal window with a dark transparent mask behind it. The title of the card is showing at the top of the modal window. You will also be able to check the title to enable the edit mode, which we will talk about later. Under the title is the description of the card. You can click the edit icon to open the edit description form, and when there are attachments added to the card, they will show up as a list under the description. When the attachment is an image, the thumbnail of the image will show up in the preview section. Otherwise, the file type will show up in the preview section.

For every card, you will be able to add comments, and they will show up in the Activities list. In the Activities list, other activities will show up too, including adding a card, changing the title, changing the description, and adding attachments.

On the right-hand side of the modal window are the control buttons. You can click the Members button to assign a member to the card. You can click the Attachment button to upload files. You can click the Archive button to archive the card. In this version of TaskAgile, we will only implement the adding attachments feature.