Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Portals
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find partner offers
    • Partner GTM Resources
    • Blog
    • Customer stories
    • Developer Plan
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • App development topics
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • User groups
    • Register
    • ·
    • Sign in
    • ·
    • Help
    Go To
    • Power Apps Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Connector Development
    • Power Query
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Galleries
    • Community Connections & How-To Videos
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Business Value Webinars and Video Gallery
    • Emergency Response Gallery
    • Events
    • 2021 MSBizAppsSummit Gallery
    • 2020 MSBizAppsSummit Gallery
    • 2019 MSBizAppsSummit Gallery
    • Ideas
    • Power Apps Ideas
    • Community Engagement
    • Demo Extravaganza 2021
    • Demo Extravaganza - Components 2021
    • Power Apps Community Demo Extravaganza 2020
    • Experimental
    • Error Handling
    • Power Apps Experimental Features
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Power Apps Community
    • Galleries
    • Canvas Apps Components Samples
    • Shadow Card

    Shadow Card

    02-25-2020 05:22 AM - last edited 12-17-2021 14:47 PM

    CYoung
    Frequent Visitor
    858 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    CYoung
    CYoung
    Frequent Visitor
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    Shadow Card

    ‎02-25-2020 05:22 AM

    The Shadow Card component creates a shadowed card that you can use as a background for a displaying text or graphics. Its a HTML text input using the HTML shadow box parameters.  The shadow card contains a Shadow Table I have populated that has the height, offset and opacity values based on the height off the screen in card thickness that you want your shadow. The values are based on Google Design's shadow recommendations.


    The component inputs are:
    ShadowTable: I would not change this as I have included a table extrapolated from Google Design for the necessary shadow values.

    Shadow Height:  Choose 0, 0.5 or an integer from 1-24. Generally I use 1-8.
    RoundedCornerRadius: For a square card choose 0, I typically use 15.

    HeightMargin: The height needs to be high enough to accommodate the shadow height, so you may need to increase the margin if you see scroll bars.

    WidthMargin: The width needs to be wide enough to accommodate the shadow height, so you may need to increase the margin if you see scroll bars

    Margin: You need some margin to ensure that you can see the shadow
    BackgroundColorHexNo: the card is set to #ffffff which is White. You need to include the # with the 6 digit color number.

    CardTitle: If you leave it blank you can have a blank card.
    CardTitleFontSize: The font size for the card title.
    TitleColorNo: The hex no for the title color. I have set it to black #000

    I have shown a few samples below. The first uses a ShadowHeight of 1 and the rest indicate the ShadowHeight values used.

    ShadowCard.PNG

     

    Enjoy,

     

    CYoung

    Preview file
    3 KB
    Shadow Card.zip
    Labels:
    • Labels:
    • Components
    Message 1 of 2
    858 Views
    0 Kudos
    Reply
    • All posts
    • Previous Topic
    • Next Topic
    SergiP
    SergiP Advocate II
    Advocate II
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    ‎05-06-2020 04:33 AM

    Cool component!

    any idea how to handle multiline CardTitle?

     

    I tried to concatenate "first line" & Char(10) & "2nd line" but it doesn't work, Char(13) neither and adding a shift enter:

    "first line

    2nd line" 

    neither and just shows first line2nd line  on the CardTitle

    image.png

     

    Weird but when I use   

    "first line <br/>
    2nd line" 

    it accepts the change of line but unfortunately the <br/> is visible

    image.png

    Message 2 of 2
    767 Views
    0 Kudos
    Reply

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Automate
    • Power Virtual Agents

    Power Apps

    • Sign in
    • Sign up

    Browse

    • Sample apps
    • Services

    Downloads

    • Windows
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2022 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks