We have plenty of `.card` instances in our Haml which should all be migrated to be Pajamas-compliant, using our `Pajamas::CardComponent`. **Example Migration MR:** https://gitlab.com/gitlab-org/gitlab/-/merge_requests/91761/diffs **Component Docs:** https://docs.gitlab.com/ee/development/fe_guide/view_component.html#card ## Migration strategy First, determine whether the given file is deprecated by `@mention`ing appropriate people (e.g., most significant author(s)). If there's a timeline for the file's deletion: 1. Label the issue as ~wontfix 1. Remove the ~OKR label 1. Add a comment to the issue explaining why/pointing to the discussion about the file's pending removal. 1. Unassign yourself from the issue 1. Leave the issue _open_! 1. You're done! If there's no timeline for the file's deletion, then it's worth migrating now. #### Replace the line with the `card` class like this: **Before:** ```haml .card.other.classes ``` **After:** ```haml = render Pajamas::CardComponent.new(card_options: { class: 'other classes' }) do |c| ``` #### Replace the `card-body` class like this: **Before:** ```haml .card-body ``` **After:** ```haml - c.body do ``` If the `card-body` also had other classes or data attributes etc, you'll have to set them as `body_options`, like you would do with `card_options`. Like this: **Before:** ```haml .card .card-body.custom-class{data: {foo: "bar"} Example text ``` **After:** ```haml = render Pajamas::CardComponent.new(body_options: { class: 'custom-class', data: {foo: "bar"} }) do |c| - c.body do Example text ``` #### Replace the `card-header` and `card-footer` classes These are not always present, but if they are, replacing them works the same way as does the `card-body`. See above. ### Something doesn't look quite right? You might encounter a `card` that doesn't follow the rules exactly. For example, there are cases where there is no `card-body` as direct child of the `card`, but instead it's a `<ul>` list tag. In such a case, add a `- c.body do` around it and make sure it doesn't affect the padding. If it does, `@mention` a [Foundations team member](https://about.gitlab.com/company/team/?department=ecosystem-foundations-team) for guidance. Another thing you might find are forms that have the `card` class on them. In such a case, try to wrap that form in a `CardComponent` instead, and reach out to the Foundations team if that gives you any troubles.