https://community.appian.com/discussions/f/user-interface/26995/card-layout-with-dateHello community I am trying to recreate this screenshot from another application using a card layout. Can someone guide me in the right direction. Also in the other application when you hover over the card it says view detail .en-USTelligent Community 12https://community.appian.com/thread/106038?ContentTypeID=1Wed, 28 Dec 2022 14:07:00 GMTd3a83456-d57b-489c-a84c-4e8267bb592a:e5d25266-d3c1-43b3-89de-dffaeed2138bTByrdHumanIT<p>Thank you so much. That worked.</p><div style="clear:both;"></div>https://community.appian.com/thread/106034?ContentTypeID=1Wed, 28 Dec 2022 12:07:49 GMTd3a83456-d57b-489c-a84c-4e8267bb592a:6aa92ee6-08f0-4047-b14f-4b754ecc815eKomal Jain<p>a!localVariables(<br /> local!show:false(),<br /> local!textcolor:if(<br /> local!show=false(),<br /> &quot;#717d7e&quot;,<br /> &quot;#17202a&quot;<br /> ),<br /> a!columnsLayout(<br /> columns: {<br /> a!columnLayout(<br /> width: &quot;MEDIUM&quot;,<br /> contents: a!cardLayout(<br /> tooltip: if(<br /> local!show=false(),<br /> &quot;View Details&quot;,<br /> &quot;&quot;<br /> ),<br /> showBorder: false(),<br /> showShadow: if(<br /> local!show=false(),<br /> false(),<br /> true()<br /> ),<br /> style: if(<br /> local!show=false(),<br /> &quot;#a9cce3&quot;,<br /> &quot;&quot;<br /> ),<br /> link: a!dynamicLink(<br /> saveInto: a!save(<br /> local!show,<br /> if(<br /> local!show=false(),<br /> true(),<br /> false()<br /> )<br /> <br /> )<br /> ),<br /> padding: &quot;NONE&quot;,<br /> height:&quot;SHORT_PLUS&quot;,<br /> contents: {<br /> a!columnsLayout(<br /> marginBelow: &quot;NONE&quot;,<br /> marginAbove: &quot;NONE&quot;,<br /> columns: {<br /> a!columnLayout(<br /> contents: {<br /> a!richTextDisplayField(<br /> labelPosition: &quot;COLLAPSED&quot;<br /> ),<br /> a!richTextDisplayField(),<br /> a!richTextDisplayField(<br /> marginAbove: &quot;NONE&quot;,<br /> marginBelow: &quot;NONE&quot;,<br /> value: {<br /> a!richTextItem(<br /> text: &quot;Gift Number:&quot;,<br /> color:local!textcolor<br /> ),<br /> &quot; &quot;,<br /> a!richTextItem(<br /> text: &quot;&quot;,<br /> color:local!textcolor<br /> )<br /> }<br /> ),<br /> a!richTextDisplayField(<br /> marginAbove: &quot;NONE&quot;,<br /> marginBelow: &quot;NONE&quot;,<br /> value: {<br /> a!richTextItem(<br /> text: &quot;Total Value:&quot;,<br /> color:local!textcolor<br /> ),<br /> &quot; &quot;,<br /> a!richTextItem(<br /> text: &quot;$100.00&quot;,<br /> color:local!textcolor<br /> )<br /> }<br /> ),<br /> a!richTextDisplayField(<br /> marginAbove: &quot;NONE&quot;,<br /> marginBelow: &quot;NONE&quot;,<br /> value: {<br /> a!richTextItem(<br /> text: &quot;Total Gift:&quot;,<br /> color:local!textcolor<br /> ),<br /> &quot; &quot;,<br /> a!richTextItem(<br /> text: &quot;0&quot;,<br /> color:local!textcolor<br /> )<br /> }<br /> ),<br /> a!richTextDisplayField(<br /> marginAbove: &quot;NONE&quot;,<br /> marginBelow: &quot;NONE&quot;,<br /> value: {<br /> a!richTextItem(<br /> text: &quot;Recipient:&quot;,<br /> color:local!textcolor<br /> ),<br /> &quot; &quot;,<br /> a!richTextItem(<br /> text: &quot;&quot;<br /> )<br /> }<br /> ),<br /> a!richTextDisplayField(<br /> marginAbove: &quot;NONE&quot;,<br /> marginBelow: &quot;NONE&quot;,<br /> value: {<br /> a!richTextItem(<br /> text: &quot;Donor:&quot;,<br /> color:local!textcolor<br /> ),<br /> &quot; &quot;,<br /> a!richTextItem(<br /> text: &quot;&quot;<br /> )<br /> }<br /> )<br /> }<br /> ),<br /> a!columnLayout(<br /> contents: {<br /> a!richTextDisplayField(),<br /> a!richTextDisplayField(),<br /> a!richTextDisplayField(),<br /> a!richTextDisplayField(),<br /> a!richTextDisplayField(<br /> showWhen: local!show=false(),<br /> value: a!richTextItem(<br /> text: &quot;View Details&quot;,<br /> size: &quot;SMALL&quot;,<br /> color : &quot;#fdfefe&quot;,<br /> <br /> )<br /> )<br /> }<br /> ),<br /> a!columnLayout(<br /> width: &quot;EXTRA_NARROW&quot;,<br /> contents: {<br /> a!cardLayout(<br /> showBorder: false(),<br /> marginBelow: &quot;NONE&quot;,<br /> style: &quot;#7fb3d5&quot;,<br /> contents: {<br /> a!richTextDisplayField(<br /> value: a!richTextItem(<br /> text: &quot;15&quot;,<br /> size: &quot;MEDIUM_PLUS&quot;,<br /> color:local!textcolor<br /> )<br /> )<br /> }<br /> ),<br /> a!cardLayout(<br /> showBorder: false(),<br /> marginAbove: &quot;NONE&quot;,<br /> style: &quot;#2980b9&quot;, <br /> padding:&quot;NONE&quot;,<br /> contents: a!richTextDisplayField(<br /> labelPosition: &quot;COLLAPSED&quot;,<br /> marginBelow :&quot;NONE&quot;,<br /> value: {a!richTextItem(<br /> text: &quot;Dec&quot;,<br /> style: &quot;STRONG&quot;,<br /> size:&quot;MEDIUM&quot;,<br /> color:local!textcolor<br /> ),<br /> &quot; &quot;,<br /> a!richTextItem(<br /> text: &quot;22&quot;,<br /> style: &quot;STRONG&quot;,<br /> size:&quot;SMALL&quot;,<br /> color:local!textcolor<br /> )}<br /> )<br /> ),</p> <p>}<br /> )<br /> }<br /> ),<br /> a!richTextDisplayField(<br /> align: &quot;RIGHT&quot;,<br /> labelPosition: &quot;COLLAPSED&quot;,<br /> marginAbove: &quot;NONE&quot;,<br /> marginBelow: &quot;NONE&quot;,<br /> value: {<br /> a!richTextItem(<br /> text: &quot;* Requires Review &quot;,<br /> color:local!textcolor<br /> )<br /> }<br /> ),<br /> }<br /> )<br /> )<br /> }<br /> )<br />)</p> <p><img alt=" " src="/resized-image/__size/640x480/__key/communityserver-discussions-components-files/13/pastedimage1672229338311v1.png" /></p> <p><img alt=" " src="/resized-image/__size/640x480/__key/communityserver-discussions-components-files/13/pastedimage1672229358925v2.png" /></p><div style="clear:both;"></div>