Skip to content

Instantly share code, notes, and snippets.

@hteumeuleu

hteumeuleu/outlook-adaptive-card-flight.html

Created May 7, 2018 20:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hteumeuleu/f59f1210c8372ee9a8fa7c9f8d432efa to your computer and use it in GitHub Desktop.
Save hteumeuleu/f59f1210c8372ee9a8fa7c9f8d432efa to your computer and use it in GitHub Desktop.
Download ZIP
Outlook Adaptive Card - Flight Itinerary Example
Raw
outlook-adaptive-card-flight.html
<div class="_14Jtf8DbUC3EHtjC4hMK4V"><div class="ac-container" tabindex="0" aria-label="<s>Your flight is confirmed for you and 3 other passengers from San Francisco to Amsterdam on Friday, October 10 8:30 AM</s>" style="display: flex; flex-direction: column; justify-content: flex-start; background-color: rgb(255, 255, 255); box-sizing: border-box; flex: 0 0 auto; padding: 20px;"><div class="ac-columnSet" style="display: flex; justify-content: flex-start; box-sizing: border-box; flex: 0 0 auto;"><div class="ac-container" style="display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; min-width: 0px; flex: 1 1 50px;"><div style="overflow: hidden; font-family: &quot;Segoe UI&quot;; text-align: left; font-size: 17px; line-height: 22.61px; color: rgb(51, 51, 51); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;"><p style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;"><strong>FLIGHT ITINERARY - CONTOSO AIR</strong></p>
</div><div style="overflow: hidden; font-family: &quot;Segoe UI&quot;; text-align: left; font-size: 14px; line-height: 18.62px; color: rgba(51, 51, 51, 0.933); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;"><p style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;">Passenger: David Claux</p>
</div></div><div style="width: 8px; overflow: hidden; display: flex; flex: 0 0 auto;"></div><div class="ac-container" style="display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; min-width: 0px; flex: 0 1 auto;"><div class="ac-image" style="display: flex; align-items: flex-start; justify-content: flex-start; box-sizing: border-box; flex: 0 0 auto;"><img src="http://acdesignerbeta.azurewebsites.net/assets/Airplane_Co_Ico.png" alt="undefined" style="max-height: 100%; min-width: 0px; max-width: 100%;"></div></div></div><div style="height: 20px; overflow: hidden; flex: 0 0 auto;"></div><div style="overflow: hidden; font-family: &quot;Segoe UI&quot;; text-align: left; font-size: 14px; line-height: 18.62px; color: rgb(51, 51, 51); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;"><p style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;">2 Stops</p>
</div><div style="overflow: hidden; font-family: &quot;Segoe UI&quot;; text-align: left; font-size: 14px; line-height: 18.62px; color: rgb(51, 51, 51); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;"><p style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;">Fri, October 10 8:30 AM</p>
</div><div style="margin-top: 4px; padding-top: 4px; border-top: 1px solid rgb(238, 238, 238); overflow: hidden; display: flex; flex: 0 0 auto;"></div><div class="ac-columnSet" style="display: flex; justify-content: flex-start; box-sizing: border-box; flex: 0 0 auto;"><div class="ac-container" style="display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; min-width: 0px; flex: 1 1 50%;"><div style="overflow: hidden; font-family: &quot;Segoe UI&quot;; text-align: left; font-size: 14px; line-height: 18.62px; color: rgba(51, 51, 51, 0.933); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;"><p style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;">San Francisco</p>
</div><div style="overflow: hidden; font-family: &quot;Segoe UI&quot;; text-align: left; font-size: 26px; line-height: 34.58px; color: rgb(46, 137, 252); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;"><p style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;">SFO</p>
</div></div><div style="width: 8px; overflow: hidden; display: flex; flex: 0 0 auto;"></div><div class="ac-container" style="display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; min-width: 0px; flex: 0 1 auto;"><div style="overflow: hidden; font-family: &quot;Segoe UI&quot;; text-align: left; font-size: 14px; line-height: 18.62px; color: rgb(51, 51, 51); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;"><p style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;">&nbsp;</p>
</div><div class="ac-image" style="display: flex; align-items: flex-start; justify-content: flex-start; box-sizing: border-box; flex: 0 0 auto;"><img src="http://acdesignerbeta.azurewebsites.net/assets/Airplane_Ico.png" alt="undefined" style="max-height: 100%; min-width: 0px; width: 40px;"></div></div><div style="width: 8px; overflow: hidden; display: flex; flex: 0 0 auto;"></div><div class="ac-container" style="display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; min-width: 0px; flex: 1 1 50%;"><div style="overflow: hidden; font-family: &quot;Segoe UI&quot;; text-align: right; font-size: 14px; line-height: 18.62px; color: rgba(51, 51, 51, 0.933); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;"><p style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;">Amsterdam</p>
</div><div style="overflow: hidden; font-family: &quot;Segoe UI&quot;; text-align: right; font-size: 26px; line-height: 34.58px; color: rgb(46, 137, 252); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;"><p style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;">AMS</p>
</div></div></div><div style="height: 20px; overflow: hidden; flex: 0 0 auto;"></div><div style="overflow: hidden; font-family: &quot;Segoe UI&quot;; text-align: left; font-size: 14px; line-height: 18.62px; color: rgb(51, 51, 51); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;"><p style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;">Non-Stop</p>
</div><div style="overflow: hidden; font-family: &quot;Segoe UI&quot;; text-align: left; font-size: 14px; line-height: 18.62px; color: rgb(51, 51, 51); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;"><p style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;">Fri, October 18 9:50 PM</p>
</div><div style="margin-top: 4px; padding-top: 4px; border-top: 1px solid rgb(238, 238, 238); overflow: hidden; display: flex; flex: 0 0 auto;"></div><div class="ac-columnSet" style="display: flex; justify-content: flex-start; box-sizing: border-box; flex: 0 0 auto;"><div class="ac-container" style="display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; min-width: 0px; flex: 1 1 50%;"><div style="overflow: hidden; font-family: &quot;Segoe UI&quot;; text-align: left; font-size: 14px; line-height: 18.62px; color: rgba(51, 51, 51, 0.933); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;"><p style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;">Amsterdam</p>
</div><div style="overflow: hidden; font-family: &quot;Segoe UI&quot;; text-align: left; font-size: 26px; line-height: 34.58px; color: rgb(46, 137, 252); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;"><p style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;">AMS</p>
</div></div><div style="width: 8px; overflow: hidden; display: flex; flex: 0 0 auto;"></div><div class="ac-container" style="display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; min-width: 0px; flex: 0 1 auto;"><div style="overflow: hidden; font-family: &quot;Segoe UI&quot;; text-align: left; font-size: 14px; line-height: 18.62px; color: rgb(51, 51, 51); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;"><p style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;">&nbsp;</p>
</div><div class="ac-image" style="display: flex; align-items: flex-start; justify-content: flex-start; box-sizing: border-box; flex: 0 0 auto;"><img src="http://acdesignerbeta.azurewebsites.net/assets/Airplane_Ico.png" alt="undefined" style="max-height: 100%; min-width: 0px; width: 40px;"></div></div><div style="width: 8px; overflow: hidden; display: flex; flex: 0 0 auto;"></div><div class="ac-container" style="display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; min-width: 0px; flex: 1 1 50%;"><div style="overflow: hidden; font-family: &quot;Segoe UI&quot;; text-align: right; font-size: 14px; line-height: 18.62px; color: rgba(51, 51, 51, 0.933); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;"><p style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;">San Francisco</p>
</div><div style="overflow: hidden; font-family: &quot;Segoe UI&quot;; text-align: right; font-size: 26px; line-height: 34.58px; color: rgb(46, 137, 252); font-weight: 400; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;"><p style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;">SFO</p>
</div></div></div></div></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment