How to get Microsoft Teams card to display correctly

Question

I'm building a Microsoft Teams app with the botbuilder in typescript. Everything is working fine except the UI is not matching exactly what I want. Im using an adaptive card to render my responses to the user and typically the adaptive card has a top border (seen below is black) but mine doesnt have it and i'm trying to figure out how i can make it work.

I want my card to have the black border on top as shown here for in github's bot: See image

This is what mine currently shows: see image

below is my code to render the card. What i'm i doing wrong?

  await context.sendActivity({ attachments: [
    CardFactory.adaptiveCard({
      "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
      "version": "1.0",
      "msteams": {
        "width": "Full"
      },
      "body": [
        {
          "type": "TextBlock",
          "text": "My card doesnt have the border.",
          "wrap": true
        }
      ]
    })
  ] });

Answer 1

I finally figured out the solution. I had to the office 365 connector card to get that color strip. FINALLY!

Here's the code sample for Nodejs/typescript:

CardFactory.o365ConnectorCard({
      "title": "card title",
      "text": "card text",
      "summary": "O365 card summary",
      "themeColor": "#E67A9E",
      "sections": [
          {
              "text": "This is some <strong>bold</strong> text"
          },
          {
              "text": "This is some <em>italic</em> text"
          },
          {
              "text": "This is some <strike>strikethrough</strike> text"
          },
          {
              "text": "<h1>Header 1</h1>\r<h2>Header 2</h2>\r <h3>Header 3</h3>"
          },
          {
              "text": "bullet list <ul><li>text</li><li>text</li></ul>"
          },
          {
              "text": "ordered list <ol><li>text</li><li>text</li></ol>"
          },
          {
              "text": "hyperlink <a href=\"https://www.bing.com/\">Bing</a>"
          },
          {
              "text": "embedded image <img src=\"https://aka.ms/Fo983c\" alt=\"Duck on a rock\"></img>"
          },
          {
              "text": "preformatted text <pre>text</pre>"
          },
          {
              "text": "Paragraphs <p>Line a</p><p>Line b</p>"
          },
          {
              "text": "<blockquote>Blockquote text</blockquote>"
          }
       ]
  })