feat: 🎸 New Card component with header, body and footer

Add the new Card component with header, body and footer for the desktop
client. This card will be used within the connection dialog to show
credentials

✅ Closes: ICU-1432

ui/desktop/app/components/card/index.hbs

@@ -0,0 +1,15 @@
+<section class='credentials-card'>
+  {{yield
+    (hash
+      header=(component
+        'rose/anonymous' tagName='header' class='credentials-card-header'
+      )
+      body=(component
+        'rose/anonymous' tagName='div' class='credentials-card-body'
+      )
+      footer=(component
+        'rose/anonymous' tagName='footer' class='credentials-card-footer'
+      )
+    )
+  }}
+</section>

ui/desktop/tests/integration/components/card-test.js

@@ -0,0 +1,28 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | card', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Card />`);
+    assert.ok(find('.credentials-card'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`
+      <Card as |card|>
+        <card.header></card.header>
+        <card.body></card.body>
+        <card.footer></card.footer>
+      </Card>
+    `);
+
+    assert.ok(find('.credentials-card'));
+    assert.ok(find('.credentials-card-header'));
+    assert.ok(find('.credentials-card-body'));
+    assert.ok(find('.credentials-card-footer'));
+  });
+});