Search code examples
alexa-skills-kitalexa-voice-servicealexa-slot

how to design mobile card in alexa


I have developed an app and it is functioning properly, however when it comes to designing, i am unable to achieve what is given in the example despite of doing the same code in the example. I want to achieve this design where image is in the center with title above and description down but what I am getting is this, side image, side title and description down. Please let me know how to achieve that. Here is my sample of my code

"response" : {
"outputSpeech" : {
    "type" : "SSML",
    "ssml" : "<speak>Hello,welcome!</speak>"
},
"card": {
    "type": "Standard",
    "title": "My Title",
    "text": "My description",
    "image": {
        "smallImageUrl": "small image with the width 720 and height 480",
        "largeImageUrl": "large image with the width 1200 and height=800"
      }
},
"reprompt": {
      "outputSpeech": {
    "type": "SSML",
    "ssml": "<speak>I am waiting for your command!!</speak>"
      }
},
     "shouldEndSession" : false
}

Solution

  • It looks like Amazon has changed the Standard Card layout. Images are now shrinked and pushed to the left. The examples shown in current documentation on Cards have the new layout. The blog post you are referring is more than one and half years old