@forter/list

fc-list

Simple list which is presented as key value table.

Usage

<script>
   import '@forter/list';
</script>

<fc-list>
</fc-list>

Examples

<!-- spaceIn -->
<fc-list .array="${[['type','dog cat'],['name','joy neow']]}">
   <b slot="header">Header</b>
   <b slot="footer">Footer</b>
</fc-list>

<!-- complex -->
<fc-list>
     <fc-list-item>
       <fc-icon icon="ecommerce"></fc-icon>
       <label> Ecommerce </label>
       <section>Forter protects all of your online transactions from fraud </section>
     </fc-list-item>
     <fc-list-item>
         <fc-icon icon="inr"></fc-icon>
         <label> INR Solution </label>
         <section>Forter automatically evaluates the risk of each transaction affected by the directive </section>
     </fc-list-item>
     <fc-list-item>
         <fc-icon icon="loyalty"></fc-icon>
         <label> Loyalty </label>
         <section> protects your loyalty program accounts from unauthorized access or attempts to steal their points </section>
     </fc-list-item>
     <fc-list-item>
       <fc-icon icon="returns"></fc-icon>
       <label> Returns </label>
       <section>Identify and block consumers who abuse your business’ refund policies. </section>
     </fc-list-item>

     <fc-list-item>
       <fc-icon icon="promotions"></fc-icon>
       <label> Promotions </label>
       <section> Prevent financial losses due to users who take advantage of your promotions and coupons.. </section>
     </fc-list-item>

     <fc-list-item>
       <fc-icon icon="gateway"></fc-icon>
       <label> Gateway </label>
       <section> determine whether credit card applicants are legitimate to safeguard your customer relationships </section>
     </fc-list-item>

     <fc-list-item>
         <fc-icon icon="developer"></fc-icon>
         <label>Developer</label>
         <section> Integration tools to help faster and smoother integration to Forter.</section>
     </fc-list-item>
</fc-list>

Properties

Events

Slots

CSS Custom Properties