1.0.0-rc.23 • Published 11 months ago

@bodiless/card v1.0.0-rc.23

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
11 months ago

Card Component

Card is a group of content which typically features a less than full size image alongside supporting content or a call to action (CTA). Cards are commonly used on websites to call out or offer something to the site visitor. The card component allows site builders to configure and modify cards according to the site design.

Basic cards usually consist of some or all of the following components:

  • Title: Text editable via simple text editor.
  • Image: Image component - linkable or not linkable.
  • Description: Text editable via basic text editor.
  • CTA Button: Text editable via simple text editor. Link component to configure link.

Content Editor Details

BodilessJS by default offers basic layout options for both vertical and horizontal cards. For both horizontal and vertical options you can choose to include the following: title, body text, CTA.

To place a card on your website click on the +Add button on the toolbar.

  1. Select the type of card you'd like to use. You can use the filters in the component window to narrow your selection.
    npm.io

  2. Once you have selected the appropriate card you can edit the various components via the context menu. * e.g. For a horizontal Card with Title, Body and CTA

  3. Resize the card by clicking near the blue line on the righthand edge of the flow container box and dragging to expand or contract. npm.io

  4. Re-position the card on the page by clicking near the two lines at the top left of the card's flow container box and dragging to the desired place on your page. npm.io


Site Builder Details

Card Variations with combining tokens

The card can be composed of different tokens (see code) to create many card variations. These variations include:

  • Horizontal
  • Vertical
  • No Title
  • No Body
  • No CTA
  • Overlay of CTA
  • Overlay of title

Usage

const CardVerticalNoTitle = flow(
  asCardWithPaddings, asCardDefaultStyle, asCardVertical, asCardNoTitle,
)(Card); 

Architectural Details

The Card renders as a block of html with the following:

    <Wrapper {...rest}>
      <ImageWrapper>
        <ImageLink>
          <Image />
        </ImageLink>
      </ImageWrapper>
      <ContentWrapper>
        <Title />
        <Body />
        <Link />
      </ContentWrapper>
    </Wrapper>
1.0.0-rc.42

11 months ago

1.0.0-rc.41

11 months ago

1.0.0-rc.40

11 months ago

1.0.0-rc.39

11 months ago

1.0.0-rc.38

11 months ago

1.0.0-rc.35

1 year ago

1.0.0-rc.34

1 year ago

1.0.0-rc.37

1 year ago

1.0.0-rc.36

1 year ago

1.0.0-rc.24

1 year ago

1.0.0-rc.28

1 year ago

1.0.0-rc.27

1 year ago

1.0.0-rc.26

1 year ago

1.0.0-rc.25

1 year ago

1.0.0-rc.29

1 year ago

1.0.0-rc.31

1 year ago

1.0.0-rc.30

1 year ago

1.0.0-rc.33

1 year ago

1.0.0-rc.32

1 year ago

1.0.0-rc.23

1 year ago

1.0.0-rc.19

2 years ago

1.0.0-rc.18

2 years ago

1.0.0-rc.20

2 years ago

1.0.0-rc.22

2 years ago

1.0.0-rc.21

2 years ago

1.0.0-rc.17

2 years ago

1.0.0-rc.16

2 years ago

1.0.0-rc.15

2 years ago

1.0.0-rc.9

2 years ago

1.0.0-rc.7

2 years ago

1.0.0-rc.8

2 years ago

1.0.0-rc.5

2 years ago

1.0.0-rc.6

2 years ago

1.0.0-rc.13

2 years ago

1.0.0-rc.12

2 years ago

1.0.0-rc.11

2 years ago

1.0.0-rc.10

2 years ago

1.0.0-rc.3

2 years ago

1.0.0-rc.4

2 years ago

1.0.0-rc.14

2 years ago

1.0.0-rc.2

2 years ago

1.0.0-rc.1

2 years ago

1.0.0-beta.11

2 years ago

1.0.0-beta.12

2 years ago

1.0.0-beta.10

2 years ago

1.0.0-beta.17

2 years ago

1.0.0-beta.18

2 years ago

1.0.0-beta.15

2 years ago

1.0.0-beta.16

2 years ago

1.0.0-beta.2

2 years ago

1.0.0-beta.3

2 years ago

1.0.0-beta.4

2 years ago

1.0.0-beta.5

2 years ago

1.0.0-beta.0

2 years ago

1.0.0-beta.1

2 years ago

1.0.0-beta.6

2 years ago

1.0.0-beta.7

2 years ago

1.0.0-beta.8

2 years ago

1.0.0-beta.9

2 years ago

0.3.6

2 years ago

0.3.5

2 years ago

0.3.7

2 years ago

0.3.2

2 years ago

0.3.4

2 years ago

0.3.3

2 years ago

0.3.1

2 years ago

0.3.0

3 years ago

0.2.10

3 years ago

0.2.9

3 years ago

0.2.8

3 years ago

0.2.7

3 years ago

0.2.6

3 years ago

0.2.5

3 years ago

0.2.4

3 years ago

0.2.3

3 years ago

0.2.2

3 years ago

0.2.1

3 years ago

0.2.0

3 years ago