@stone-payments/emd-basic-card v1.3.3

Card

Emerald Card UI component.

Usage

npm install @stone-payments/emd-basic-card

import '@stone-payments/emd-basic-card';

<emd-card>
  <user-details></user-details>
</emd-card>

 <emd-card>
  <h4 slot="header">User Details</h4>
  <emd-icon slot="header-extra" icon="close"></emd-icon>
  <user-details></user-details>
  <p slot="footer">Updated one hour ago</p>
</emd-card>

Attributes and Properties

expandedbody

Controls whether the content has a margin of 20px.

• Type: Boolean
• Attribute and property

noscroll

Prevents the component from scrolling the content, which happens by default. When noscroll is used, the content itself becomes responsible for scrolling.

• Type: Boolean
• Attribute and property

CSS Properties

--emd-card-header-background

Sets the Card header's background.

• Default: transparent

--emd-card-body-background

Sets the Card body's background.

• Default: transparent

--emd-card-footer-background

Sets the Card footer's background.

• Default: transparent

Slots

Default

The component's content. Usually another component, but it can be anything.

header

The component's header, at the top.

header-extra

The component's area for action buttons, i.e. a close icon, at the top-right corner.

footer

The component's header, at the bottom.