<div style="max-width: 330px; padding-left: 25px">
<div class="acl-result-card acl-result-card--border-grey acl-result-card--rounded-edges">
<div class="acl-result-card__column">
<div class="acl-result-card__image-container">
<div class="acl-result-card__image-icon">
<div class="acl-result-card__image-icon-background">
<i class="aforza-icons animated fadeIn">acl_promo_badge</i>
</div>
<div class="acl-result-card__image-icon-foreground">
<i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
</div>
</div>
<img class="acl-promotion-catalogue-card__image" src="/assets/img/product-ex-1.png">
</div>
</div>
<div style="margin-bottom: 50px">
</div>
<div class="acl-result-card__column acl-result-card__padding--right-small acl-result-card__padding--left-small">
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline">
Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
</div>
<div class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--grey">
DKE-34393
</div>
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__padding--top-small">
<span class="acl-result-card__text--extra-small">$</span>30.05 each
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__hover-content">
<div class="acl-result-card__remove">
<i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
</div>
</div>
</div>
</div>
<div style="margin-bottom: 50px">
</div>
<div class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey">
<div class="acl-result-card__column">
<div class="acl-result-card__enhanced-icon">
<div class="acl-result-card__enhanced-icon-background">
<i class="aforza-icons animated fadeIn">acl_promo_badge</i>
</div>
<div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
<i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
</div>
</div>
</div>
<div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
<div class="acl-result-card__text acl-result-card__text--bold">
Applied <span class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">10%
off</span>
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__hover-content">
<div class="acl-result-card__remove">
<i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
</div>
</div>
</div>
</div>
<div style="margin-bottom: 50px">
</div>
<div class="acl-result-card acl-result-card__hover--background-grey">
<div class="acl-result-card__column">
<div class="acl-promotion-catalogue-card__image-icon acl-promotion-catalogue-card__image-icon">
<div class="acl-promotion-product-configuration-card__image-icon-background">
<i class="aforza-icons animated fadeIn">acl_promo_badge</i>
</div>
<div class="acl-promotion-product-configuration-card__image-icon-foreground">
<i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
</div>
</div>
<img class="acl-promotion-catalogue-card__image" src="/assets/img/product-ex-1.png">
</div>
<div class="acl-result-card__column acl-result-card__column--text-left">
<div class="acl-result-card__text acl-result-card__text--bold">
Applied <span class="acl-result-card__text acl-result-card__text--teal acl-result-card__text--uppercase acl-result-card__padding--left-small">10%
off</span>
</div>
</div>
<div class="acl-result-card__column">
<i class="aforza-icons acl-result-card__icon--grey aforza-icons acl-result-card__icon--small acl-result-card__hover--grey">acl_arrow_right
</i>
</div>
</div>
<div style="margin-bottom: 50px">
</div>
<div class="acl-result-card acl-result-card--border-purple acl-result-card--rounded-edges">
<div class="acl-result-card__column">
<div class="acl-promotion-catalogue-card__image-icon acl-promotion-catalogue-card__image-icon">
<div class="acl-promotion-product-configuration-card__image-icon-background">
<i class="aforza-icons animated fadeIn">acl_promo_badge</i>
</div>
<div class="acl-promotion-product-configuration-card__image-icon-foreground">
<i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
</div>
</div>
<img class="acl-promotion-catalogue-card__image" src="/assets/img/product-ex-1.png">
</div>
<div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--right-small acl-result-card__padding--left-small">
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline">
Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
</div>
<div class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--grey">
DKE-34393
</div>
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__padding--top-small">
<span class="acl-result-card__text--extra-small">$</span>30.05 each
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__cta">
<div class="acl-result-card__cta-icon acl-result-card__cta-icon--teal">
<i class="aforza-icons animated fadeIn">acl_drag_drop</i>
</div>
</div>
</div>
</div>
<div style="margin-bottom: 50px">
</div>
<div class="acl-result-card acl-result-card--border-purple acl-result-card--rounded-edges">
<div class="acl-result-card__column">
<div class="acl-promotion-catalogue-card__image-icon acl-promotion-catalogue-card__image-icon">
<div class="acl-promotion-product-configuration-card__image-icon-background">
<i class="aforza-icons animated fadeIn">acl_promo_badge</i>
</div>
<div class="acl-promotion-product-configuration-card__image-icon-foreground">
<i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
</div>
</div>
<img class="acl-promotion-catalogue-card__image" src="/assets/img/product-ex-1.png">
</div>
<div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--right-small acl-result-card__padding--left-small">
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline acl-result-card__elipsis acl-result-card__elipsis--two-lines">
Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
</div>
<div class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--dark-blue acl-result-card__padding--top-extra-small">
Inherited Promotion
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__cta acl-result-card__cta--large acl-result-card__cta--grey">
<div class="acl-result-card__cta-icon acl-result-card__cta-icon--large acl-result-card__cta-icon--purple">
<i class="aforza-icons animated fadeIn">acl_drag_drop</i>
</div>
</div>
</div>
</div>
<div style="margin-bottom: 50px">
</div>
<div class="acl-result-card acl-result-card--border-grey acl-result-card--rounded-edges">
<div class="acl-result-card__column">
<img class="acl-promotion-catalogue-card__image" src="/assets/img/product-ex-1.png">
</div>
<div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--right-small acl-result-card__padding--left-small">
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline">
Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
</div>
<div class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--grey">
DKE-34393
</div>
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__padding--top-small">
<span class="acl-result-card__text--extra-small">$</span>30.05 each
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__cta">
<div class="acl-result-card__cta-icon acl-result-card__cta-icon--teal"><i class="aforza-icons animated fadeIn">acl_drag_drop</i>
</div>
</div>
</div>
</div>
<div style="margin-bottom: 50px">
</div>
<div class="acl-result-card acl-result-card--border-grey acl-result-card--rounded-edges">
<div class="acl-result-card__column">
<img class="acl-promotion-catalogue-card__image" src="/assets/img/product-ex-1.png">
</div>
<div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--right-small acl-result-card__padding--left-small">
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline ">
Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
</div>
<div class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--grey">
DKE-34393
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__cta">
<div class="acl-result-card__cta-icon acl-result-card__cta-icon--teal"><i class="aforza-icons animated fadeIn">acl_drag_drop</i>
</div>
</div>
</div>
</div>
<div style="margin-bottom: 50px">
</div>
<div class="acl-result-card acl-result-card--border-grey acl-result-card--rounded-edges">
<div class="acl-result-card__column acl-result-card__text--teal acl-result-card__padding--right-small">
<i class="aforza-icons animated fadeIn">acl_route</i>
</div>
<div class="acl-result-card__column acl-result-card__column--text-left">
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline">
Fruit
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__cta">
<div class="acl-result-card__cta-icon acl-result-card__cta-icon--teal"><i class="aforza-icons animated fadeIn">acl_drag_drop</i>
</div>
</div>
</div>
</div>
<div style="margin-bottom: 50px">
</div>
<div class="acl-result-card acl-result-card--border-grey acl-result-card--rounded-edges">
<div class="acl-result-card__column">
<div class="acl-result-card__text acl-result-card__text--teal acl-result-card__text--bold acl-result-card__hover--underline">
<i class="aforza-icons animated fadeIn acl-result-card__icon--medium">acl_route</i> South West Route
</div>
<div class="acl-result-card__text acl-result-card__text--teal acl-result-card__text--extra-small">
<span class="acl-result-card__padding--right-small acl-result-card__text--extra-small">20
stops</span><span>34 km</span>
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__cta">
<div class="acl-result-card__cta-icon acl-result-card__cta-icon--teal">
<i class="aforza-icons animated fadeIn">acl_drag_drop</i>
</div>
</div>
</div>
</div>
<div style="margin-bottom: 50px">
</div>
<div class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey">
<div class="acl-result-card__coloured-indicator acl-result-card__coloured-indicator--teal"></div>
<div class="acl-result-card__column">
<div class="acl-result-card__enhanced-icon">
<div class="acl-result-card__enhanced-icon-background">
<i class="aforza-icons animated fadeIn">acl_promo_badge</i>
</div>
<div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
<i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
</div>
</div>
</div>
<div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
<div class="acl-result-card__text acl-result-card__text--bold">
Applied <span class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">10%
off</span>
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__hover-content">
<div class="acl-result-card__remove">
<i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
</div>
</div>
</div>
</div>
<div style="margin-bottom: 50px">
</div>
<div class="acl-result-card acl-result-card--border-top-grey acl-result-card--border-bottom-grey">
<div class="acl-result-card__column">
<div class="acl-result-card__text--teal">
<span class="acl-result-card__text--bold acl-result-card__text--small">$</span><span class="acl-result-card__text--bold acl-result-card__text--large">382K</span>
</div>
</div>
<div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--right-small acl-result-card__padding--left-medium">
<div class="acl-result-card__text acl-result-card__text--black-reduced-opacity acl-result-card__text--extra-small acl-result-card__text--bold acl-result-card__hover--underline ">
Base Revenue
</div>
<div class="acl-result-card__text acl-result-card__text--black-reduced-opacity acl-result-card__text--extra-small acl-result-card__text--grey">
What revenue do we normally generate?
</div>
</div>
</div>
<div style="margin-bottom: 50px">
</div>
<div class="acl-result-card acl-result-card--border-top-grey acl-result-card--border-bottom-grey">
<div class="acl-result-card__column acl-result-card__column--flex acl-result-card__column--text-left acl-result-card__column--unset-width">
<div class="acl-result-card__text acl-result-card__text--black-reduced-opacity acl-result-card__text--extra-small acl-result-card__text--bold acl-result-card__hover--underline ">
Base Revenue
</div>
<span class="acl-result-card__icon--xsmall acl-result-card__padding--left-extra-small acl-result-card__align-content--vertical-center" style="margin-top: 2px">
<i class="aforza-icons acl-result-card__icon--black-reduced-opacity" data-acl-tooltip="What revenue do we normally generate?">acl_notification_info</i>
</span>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__text--blue">
<span class="acl-result-card__text--bold acl-result-card__text--large">ثلاثة مائة ألف
</span>
</div>
</div>
</div>
<div style="margin-bottom: 50px">
</div>
</div>
<div style="max-width: 330px; padding-left: 25px">
<div class="acl-result-card acl-result-card--border-grey acl-result-card--rounded-edges">
<div class="acl-result-card__column">
<div class="acl-result-card__image-container">
<div class="acl-result-card__image-icon">
<div class="acl-result-card__image-icon-background">
<i class="aforza-icons animated fadeIn">acl_promo_badge</i>
</div>
<div class="acl-result-card__image-icon-foreground">
<i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
</div>
</div>
<img class="acl-promotion-catalogue-card__image" src="/assets/img/product-ex-1.png">
</div>
</div>
<div style="margin-bottom: 50px">
{{!-- this is just for ACL demo purposes, to make some space :) Please don't use this in production. --}}
</div>
<div class="acl-result-card__column acl-result-card__padding--right-small acl-result-card__padding--left-small">
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline">
Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
</div>
<div class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--grey">
DKE-34393
</div>
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__padding--top-small">
<span class="acl-result-card__text--extra-small">$</span>30.05 each
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__hover-content">
<div class="acl-result-card__remove">
<i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
</div>
</div>
</div>
</div>
{{!-- End of first --}}
<div style="margin-bottom: 50px">
{{!-- this is just for ACL demo purposes, to make some space :) Please don't use this in production. --}}
</div>
{{!-- Start of Second --}}
<div
class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey">
<div class="acl-result-card__column">
<div class="acl-result-card__enhanced-icon">
<div class="acl-result-card__enhanced-icon-background">
<i class="aforza-icons animated fadeIn">acl_promo_badge</i>
</div>
<div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
<i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
</div>
</div>
</div>
<div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
<div class="acl-result-card__text acl-result-card__text--bold">
Applied <span
class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">10%
off</span>
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__hover-content">
<div class="acl-result-card__remove">
<i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
</div>
</div>
</div>
</div>
{{!-- End of Second --}}
<div style="margin-bottom: 50px">
{{!-- this is just for ACL demo purposes, to make some space :) Please don't use this in production. --}}
</div>
{{!-- Start of Third --}}
<div class="acl-result-card acl-result-card__hover--background-grey">
<div class="acl-result-card__column">
<div class="acl-promotion-catalogue-card__image-icon acl-promotion-catalogue-card__image-icon">
<div class="acl-promotion-product-configuration-card__image-icon-background">
<i class="aforza-icons animated fadeIn">acl_promo_badge</i>
</div>
<div class="acl-promotion-product-configuration-card__image-icon-foreground">
<i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
</div>
</div>
<img class="acl-promotion-catalogue-card__image" src="/assets/img/product-ex-1.png">
</div>
<div class="acl-result-card__column acl-result-card__column--text-left">
<div class="acl-result-card__text acl-result-card__text--bold">
Applied <span
class="acl-result-card__text acl-result-card__text--teal acl-result-card__text--uppercase acl-result-card__padding--left-small">10%
off</span>
</div>
</div>
<div class="acl-result-card__column">
<i
class="aforza-icons acl-result-card__icon--grey aforza-icons acl-result-card__icon--small acl-result-card__hover--grey">acl_arrow_right
</i>
</div>
</div>
{{!-- End of Third --}}
<div style="margin-bottom: 50px">
{{!-- this is just for ACL demo purposes, to make some space :) Please don't use this in production. --}}
</div>
{{!-- Start of Fourth --}}
<div class="acl-result-card acl-result-card--border-purple acl-result-card--rounded-edges">
<div class="acl-result-card__column">
<div class="acl-promotion-catalogue-card__image-icon acl-promotion-catalogue-card__image-icon">
<div class="acl-promotion-product-configuration-card__image-icon-background">
<i class="aforza-icons animated fadeIn">acl_promo_badge</i>
</div>
<div class="acl-promotion-product-configuration-card__image-icon-foreground">
<i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
</div>
</div>
<img class="acl-promotion-catalogue-card__image" src="/assets/img/product-ex-1.png">
</div>
<div
class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--right-small acl-result-card__padding--left-small">
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline">
Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
</div>
<div class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--grey">
DKE-34393
</div>
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__padding--top-small">
<span class="acl-result-card__text--extra-small">$</span>30.05 each
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__cta">
<div class="acl-result-card__cta-icon acl-result-card__cta-icon--teal">
<i class="aforza-icons animated fadeIn">acl_drag_drop</i>
</div>
</div>
</div>
</div>
{{!-- End of Fourth --}}
<div style="margin-bottom: 50px">
{{!-- this is just for ACL demo purposes, to make some space :) Please don't use this in production. --}}
</div>
{{!-- Start of Fourth --}}
<div class="acl-result-card acl-result-card--border-purple acl-result-card--rounded-edges">
<div class="acl-result-card__column">
<div class="acl-promotion-catalogue-card__image-icon acl-promotion-catalogue-card__image-icon">
<div class="acl-promotion-product-configuration-card__image-icon-background">
<i class="aforza-icons animated fadeIn">acl_promo_badge</i>
</div>
<div class="acl-promotion-product-configuration-card__image-icon-foreground">
<i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
</div>
</div>
<img class="acl-promotion-catalogue-card__image" src="/assets/img/product-ex-1.png">
</div>
<div
class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--right-small acl-result-card__padding--left-small">
<div
class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline acl-result-card__elipsis acl-result-card__elipsis--two-lines">
Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
</div>
<div
class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--dark-blue acl-result-card__padding--top-extra-small">
Inherited Promotion
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__cta acl-result-card__cta--large acl-result-card__cta--grey">
<div
class="acl-result-card__cta-icon acl-result-card__cta-icon--large acl-result-card__cta-icon--purple">
<i class="aforza-icons animated fadeIn">acl_drag_drop</i>
</div>
</div>
</div>
</div>
{{!-- End of Fourth --}}
<div style="margin-bottom: 50px">
{{!-- this is just for ACL demo purposes, to make some space :) Please don't use this in production. --}}
</div>
{{!-- Start of Fifth --}}
<div class="acl-result-card acl-result-card--border-grey acl-result-card--rounded-edges">
<div class="acl-result-card__column">
<img class="acl-promotion-catalogue-card__image" src="/assets/img/product-ex-1.png">
</div>
<div
class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--right-small acl-result-card__padding--left-small">
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline">
Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
</div>
<div class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--grey">
DKE-34393
</div>
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__padding--top-small">
<span class="acl-result-card__text--extra-small">$</span>30.05 each
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__cta">
<div class="acl-result-card__cta-icon acl-result-card__cta-icon--teal"><i
class="aforza-icons animated fadeIn">acl_drag_drop</i>
</div>
</div>
</div>
</div>
{{!-- End of Fifth --}}
<div style="margin-bottom: 50px">
{{!-- this is just for ACL demo purposes, to make some space :) Please don't use this in production. --}}
</div>
{{!-- Start of Six --}}
<div class="acl-result-card acl-result-card--border-grey acl-result-card--rounded-edges">
<div class="acl-result-card__column">
<img class="acl-promotion-catalogue-card__image" src="/assets/img/product-ex-1.png">
</div>
<div
class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--right-small acl-result-card__padding--left-small">
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline ">
Duke’s Premium Blend Traditional Beverage 1L (20 Pack)
</div>
<div class="acl-result-card__text acl-result-card__text--extra-small acl-result-card__text--grey">
DKE-34393
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__cta">
<div class="acl-result-card__cta-icon acl-result-card__cta-icon--teal"><i
class="aforza-icons animated fadeIn">acl_drag_drop</i>
</div>
</div>
</div>
</div>
{{!-- End of Six --}}
<div style="margin-bottom: 50px">
{{!-- this is just for ACL demo purposes, to make some space :) Please don't use this in production. --}}
</div>
{{!-- Start of Seven --}}
<div class="acl-result-card acl-result-card--border-grey acl-result-card--rounded-edges">
<div class="acl-result-card__column acl-result-card__text--teal acl-result-card__padding--right-small">
<i class="aforza-icons animated fadeIn">acl_route</i>
</div>
<div class="acl-result-card__column acl-result-card__column--text-left">
<div class="acl-result-card__text acl-result-card__text--bold acl-result-card__hover--underline">
Fruit
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__cta">
<div class="acl-result-card__cta-icon acl-result-card__cta-icon--teal"><i
class="aforza-icons animated fadeIn">acl_drag_drop</i>
</div>
</div>
</div>
</div>
{{!-- End of Seven --}}
<div style="margin-bottom: 50px">
{{!-- this is just for ACL demo purposes, to make some space :) Please don't use this in production. --}}
</div>
{{!-- Start of Eight --}}
<div class="acl-result-card acl-result-card--border-grey acl-result-card--rounded-edges">
<div class="acl-result-card__column">
<div
class="acl-result-card__text acl-result-card__text--teal acl-result-card__text--bold acl-result-card__hover--underline">
<i class="aforza-icons animated fadeIn acl-result-card__icon--medium">acl_route</i> South West Route
</div>
<div class="acl-result-card__text acl-result-card__text--teal acl-result-card__text--extra-small">
<span class="acl-result-card__padding--right-small acl-result-card__text--extra-small">20
stops</span><span>34 km</span>
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__cta">
<div class="acl-result-card__cta-icon acl-result-card__cta-icon--teal">
<i class="aforza-icons animated fadeIn">acl_drag_drop</i>
</div>
</div>
</div>
</div>
{{!-- End of Eight --}}
<div style="margin-bottom: 50px">
{{!-- this is just for ACL demo purposes, to make some space :) Please don't use this in production. --}}
</div>
{{!-- Start of nine --}}
<div
class="acl-result-card acl-result-card--border-teal acl-result-card--rounded-edges acl-result-card__hover--background-grey">
<div class="acl-result-card__coloured-indicator acl-result-card__coloured-indicator--teal"></div>
<div class="acl-result-card__column">
<div class="acl-result-card__enhanced-icon">
<div class="acl-result-card__enhanced-icon-background">
<i class="aforza-icons animated fadeIn">acl_promo_badge</i>
</div>
<div class="acl-result-card__enhanced-icon-foreground acl-result-card__icon--teal">
<i class="aforza-icons animated fadeIn">acl_promo_symbol</i>
</div>
</div>
</div>
<div class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--left-small">
<div class="acl-result-card__text acl-result-card__text--bold">
Applied <span
class="acl-result-card__text acl-result-card__text--teal acl-result-card__padding--left-small acl-result-card__text--uppercase">10%
off</span>
</div>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__hover-content">
<div class="acl-result-card__remove">
<i class="aforza-icons acl-result-card__icon--grey acl-result-card__hover--grey">acl_delete</i>
</div>
</div>
</div>
</div>
{{!-- End of Nine --}}
<div style="margin-bottom: 50px">
{{!-- this is just for ACL demo purposes, to make some space :) Please don't use this in production. --}}
</div>
{{!-- Start of Ten --}}
<div class="acl-result-card acl-result-card--border-top-grey acl-result-card--border-bottom-grey">
<div class="acl-result-card__column">
<div class="acl-result-card__text--teal">
<span class="acl-result-card__text--bold acl-result-card__text--small">$</span><span
class="acl-result-card__text--bold acl-result-card__text--large">382K</span>
</div>
</div>
<div
class="acl-result-card__column acl-result-card__column--text-left acl-result-card__padding--right-small acl-result-card__padding--left-medium">
<div
class="acl-result-card__text acl-result-card__text--black-reduced-opacity acl-result-card__text--extra-small acl-result-card__text--bold acl-result-card__hover--underline ">
Base Revenue
</div>
<div
class="acl-result-card__text acl-result-card__text--black-reduced-opacity acl-result-card__text--extra-small acl-result-card__text--grey">
What revenue do we normally generate?
</div>
</div>
</div>
{{!-- End of Ten --}}
<div style="margin-bottom: 50px">
{{!-- this is just for ACL demo purposes, to make some space :) Please don't use this in production. --}}
</div>
{{!-- Start of Ten --}}
<div class="acl-result-card acl-result-card--border-top-grey acl-result-card--border-bottom-grey">
<div
class="acl-result-card__column acl-result-card__column--flex acl-result-card__column--text-left acl-result-card__column--unset-width">
<div
class="acl-result-card__text acl-result-card__text--black-reduced-opacity acl-result-card__text--extra-small acl-result-card__text--bold acl-result-card__hover--underline ">
Base Revenue
</div>
<span
class="acl-result-card__icon--xsmall acl-result-card__padding--left-extra-small acl-result-card__align-content--vertical-center"
style="margin-top: 2px">
<i class="aforza-icons acl-result-card__icon--black-reduced-opacity"
data-acl-tooltip="What revenue do we normally generate?">acl_notification_info</i>
</span>
</div>
<div class="acl-result-card__column">
<div class="acl-result-card__text--blue">
<span class="acl-result-card__text--bold acl-result-card__text--large">ثلاثة مائة ألف
</span>
</div>
</div>
</div>
{{!-- End of Ten --}}
<div style="margin-bottom: 50px">
{{!-- this is just for ACL demo purposes, to make some space :) Please don't use this in production. --}}
</div>
</div>
/* No context defined. */
.acl-result-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 15px;
position: relative;
&:hover {
.acl-result-card__hover-content {
visibility: visible;
}
}
i {
cursor: pointer;
user-select: none;
}
&--cursor-pointer {
cursor: pointer;
}
&--space-evenly {
justify-content: space-evenly;
}
&--shadow {
box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.15);
}
&--rounded-edges {
border-radius: 6px;
}
&--border {
border: 1px solid;
}
&--border-grey {
border: 1px solid #e8ebf8;
&:hover {
border: 1px solid #b1b7cd;
}
}
&--border-top-grey {
border-top: 1px solid #e8ebf8;
}
&--border-bottom-grey {
border-bottom: 1px solid #e8ebf8;
}
&--border-teal {
border: 1px solid #2cbcb2;
}
&--border-orange {
border: 1px solid #ff985a;
}
&--border-purple {
border: 1px solid #2200b7;
}
&--border-light-blue {
border: 1px solid #2888d6;
}
&--border-dark-blue {
border: 1px solid #43749e;
}
&__text,
&__icon {
font-size: 12px;
letter-spacing: 0;
line-height: 16px;
display: flex;
align-items: center;
&--extra-small {
font-size: 10px;
}
&--small {
font-size: 12px;
}
&--medium {
font-size: 16px;
}
&--large {
font-size: 22px;
}
&--bold {
font-weight: 600;
}
&--underline {
text-decoration: underline;
}
&--uppercase {
text-transform: uppercase;
}
&--orange {
color: #ff985a;
}
&--grey {
color: #b1b7cd;
}
&--purple {
color: #2200b7;
}
&--teal {
color: #2cbcb2;
}
&--blue {
color: #1facec;
}
&--mid-blue {
color: #2888d6;
}
&--dark-blue {
color: #25547e;
}
&--black-reduced-opacity {
color: rgba(0, 0, 0, 0.75);
}
}
&__align-content {
&--vertical-center {
display: flex;
align-items: center;
}
}
&__elipsis {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
&--one-line {
-webkit-line-clamp: 1;
}
&--two-lines {
-webkit-line-clamp: 2;
}
&--three-lines {
-webkit-line-clamp: 3;
}
}
&__icon {
&--xsmall {
i {
font-size: 10px;
}
}
&--small {
i {
font-size: 16px;
}
}
&--medium {
i {
font-size: 19px;
}
}
&--large {
i {
font-size: 25px;
}
}
}
&__hover {
&--background-grey {
&:hover {
cursor: pointer;
background-color: #f8f8f8;
}
}
&--background-purple {
&:hover {
cursor: pointer;
background-color: #2200b7;
i {
color: white;
}
}
}
&--background-teal {
&:hover {
cursor: pointer;
background-color: #2cbcb2;
i {
color: white;
}
}
}
&--underline {
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
&--bold {
&:hover {
cursor: pointer;
font-weight: 600;
}
}
&--orange {
&:hover {
color: #ff985a;
}
}
&--grey {
&:hover {
color: #707893;
}
}
&--purple {
&:hover {
color: #2200b7;
}
}
&--teal {
&:hover {
color: #2cbcb2;
}
}
&--light-blue {
&:hover {
color: #2888d6;
}
}
&--dark-blue {
&:hover {
color: #43749e;
}
}
}
&__padding {
&--top-extra-small {
padding-top: 5px;
}
&--top-small {
padding-top: 10px;
}
&--top-medium {
padding-top: 20px;
}
&--top-large {
padding-top: 40px;
}
&--bottom-extra-small {
padding-bottom: 5px;
}
&--bottom-small {
padding-bottom: 10px;
}
&--bottom-medium {
padding-bottom: 20px;
}
&--bottom-large {
padding-bottom: 40px;
}
&--right-extra-small {
padding-right: 5px;
}
&--right-small {
padding-right: 10px;
}
&--right-medium {
padding-right: 20px;
}
&--right-large {
padding-right: 40px;
}
&--left-extra-small {
padding-left: 5px;
}
&--left-small {
padding-left: 10px;
}
&--left-medium {
padding-left: 20px;
}
&--left-large {
padding-left: 40px;
}
}
&__column {
&--text-left {
width: 100%;
text-align: left;
}
&--text-center {
width: 100%;
text-align: center;
}
&--text-right {
width: 100%;
text-align: right;
}
&--flex {
display: flex;
}
&--unset-width {
width: unset;
}
}
&__hover-content {
visibility: hidden;
}
&__image {
&--small {
width: 30px;
}
}
&__image-icon {
margin-top: -5px;
margin-left: -5px;
position: absolute;
height: 25px;
width: 25px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
&-background {
height: 25px;
width: 25px;
position: absolute;
i {
color: $promotion-light-blue;
font-size: 24px;
height: 25px;
width: 25px;
display: block;
line-height: 25px;
}
&--grey {
i {
color: #b1b7cd;
}
}
&--purple {
i {
color: #2200b7;
}
}
&--teal {
i {
color: #2cbcb2;
}
}
}
&-foreground {
height: 25px;
width: 25px;
position: absolute;
i {
color: $promotion-dark-blue;
font-size: 19px;
height: 25px;
width: 25px;
display: block;
line-height: 25px;
text-align: center;
}
&--grey {
i {
color: #b1b7cd;
}
}
&--purple {
i {
color: #2200b7;
}
}
&--teal {
i {
color: #2cbcb2;
}
}
&--orange {
i {
color: #ff985a;
}
}
&--dark-blue {
i {
color: #43749e;
}
}
&--light-blue {
i {
color: #2888d6;
}
}
&--large {
i {
font-size: 30px;
}
}
}
}
&__coloured-indicator {
position: absolute;
top: 0;
bottom: 0;
left: 0;
min-width: 5px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
&--orange {
background-color: #ff985a;
}
&--grey {
background-color: #b1b7cd;
}
&--purple {
background-color: #2200b7;
}
&--teal {
background-color: #2cbcb2;
}
&--blue {
background-color: #1facec;
}
&--mid-blue {
color: #2888d6;
}
&--dark-blue {
color: #25547e;
}
}
&__enhanced-icon {
margin-left: -5px;
height: 25px;
width: 25px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
&-background {
height: 25px;
width: 25px;
position: absolute;
i {
color: $promotion-light-blue;
font-size: 24px;
height: 25px;
width: 25px;
display: block;
line-height: 25px;
}
}
&-foreground {
height: 25px;
width: 25px;
position: absolute;
i {
color: $promotion-dark-blue;
font-size: 19px;
height: 25px;
width: 25px;
display: block;
line-height: 25px;
text-align: center;
}
}
}
&__cta {
height: 30px;
width: 30px;
border-radius: 6px;
background-color: rgba(70, 204, 194, 0.15);
display: flex;
align-items: center;
justify-content: center;
cursor: grab;
font-size: 23px;
i {
user-select: none;
}
&--large {
height: 44px;
width: 44px;
}
&--grey {
background-color: #f7f6fb;
}
&--purple {
background-color: #2200b7;
}
&--teal {
background-color: #2cbcb2;
}
}
&__cta-icon {
display: flex;
&--grey {
i {
color: #b1b7cd;
}
}
&--purple {
i {
color: #2200b7;
}
}
&--teal {
i {
color: #2cbcb2;
}
}
&--orange {
i {
color: #ff985a;
}
}
&--dark-blue {
i {
color: #43749e;
}
}
&--light-blue {
i {
color: #2888d6;
}
}
&--large {
i {
font-size: 30px;
}
}
}
&__margin {
&--top-small {
margin-top: 10px;
}
&--top-medium {
margin-top: 15px;
}
&--top-large {
margin-top: 30px;
}
&--bottom-small {
margin-bottom: 10px;
}
&--bottom-medium {
margin-bottom: 15px;
}
&--bottom-large {
margin-bottom: 30px;
}
}
}
No notes defined.