@forter/list-item NPM

fc-list-item

Simple list which is presented as key value table.

Usage

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

<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>

CSS Custom Properties

Property	Description
`--fc-list-item-border`	border. default: `1px solid var(--fc-gray-300)`, example: `3px solid gold`
`--fc-list-item-border-radius`	border radius. default: `5px`, example: `30px`
`--fc-list-item-grid-gap`	grid gap between all slotted elements. default: `5px`, example: `10px`
`--fc-list-item-icon-padding-top`	icon's padding top. default: `5px`, example: `10px`
`--fc-list-item-label-font-size`	label's font size. default: `17px`, example: `22px`
`--fc-list-item-label-font-weight`	label's font weight. default: `bold`, example: `normal`
`--fc-list-item-max-width`	max width. default: `250px`, example: `400px`
`--fc-list-item-padding`	inner padding. default: `10px`, example: `20px`
`--fc-list-item-section-font-size`	section's font size. default: `14px`, example: `8px`