Some time you may want to create report as like as E-COMMERCE Application. You may want to do the following:
Query of Classic Report:
select ROWID,
dbms_lob.getlength("PRODUCT_IMAGE") CARD_TITLE,
PRODUCT_NAME CARD_TEXT,
'Price : '||to_char(list_price,'99,99,999.99') CARD_SUBTEXT
from "DEMO_PRODUCT_INFO";
Top Level Inline :
.t-Card-title img {
width: 200px;
height: 200px;
align:center;
}
TEMPLATE COPY : COPY CARD TO CARD2
Row Template 1 :
<li class="t-Cards-item #CARD_MODIFIERS#">
<div class="t-Card">
<a href="#CARD_LINK#" class="t-Card-wrap">
<div class="t-Card-icon u-color #CARD_COLOR#"><span class="t-Icon fa #CARD_ICON#"
<span class="t-Card-initials" role="presentation">#CARD_INITIALS#</span></span></div>
<div class="t-Card-titleWrap"><h3 class="t-Card-title">#CARD_TITLE#</h3><h4 class="t-Card-subtitle">#CARD_SUBTITLE#</h4></div>
<div class="t-Card-body">
<div class="t-Card-desc">#CARD_TEXT#</div>
<div class="t-Card-desc">#CARD_SUBTEXT#</div>
</div>
<span class="t-Card-colorFill u-color #CARD_COLOR#"></span>
</a>
</div>
</li>
Row Template 2 :
<li class="t-Cards-item #CARD_MODIFIERS#">
<div class="t-Card">
<div class="t-Card-wrap">
<div class="t-Card-icon u-color #CARD_COLOR#"><span class="t-Icon fa #CARD_ICON#"<span class="t-Card-initials" role="presentation">#CARD_INITIALS#</span></span></div>
<div class="t-Card-titleWrap"><h3 class="t-Card-title">#CARD_TITLE#</h3><h4 class="t-Card
subtitle">#CARD_SUBTITLE#</h4></div>
<div class="t-Card-body">
<div class="t-Card-desc">#CARD_TEXT#</div>
<div class="t-Card-desc">#CARD_SUBTEXT#</div>
</div>
<span class="t-Card-colorFill u-color #CARD_COLOR#"></span>
</div>
</div>
</li>
Picture :
