@bodiless/card
Advanced tools
Changelog
1.0.0-rc.23 (2023-02-08)
Note: Version bump only for package bodiless-js
Readme
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:
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.
Select the type of card you'd like to use. You can use the filters in the
component window to narrow your selection.
Once you have selected the appropriate card you can edit the various components via the context menu.
Resize the card by clicking near the blue line on the righthand edge of the
flow container box and dragging to expand or contract.
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. 
The card can be composed of different tokens (see code) to create many card variations. These variations include:
const CardVerticalNoTitle = flow(
asCardWithPaddings, asCardDefaultStyle, asCardVertical, asCardNoTitle,
)(Card);
The Card renders as a block of html with the following:
<Wrapper {...rest}>
<ImageWrapper>
<ImageLink>
<Image />
</ImageLink>
</ImageWrapper>
<ContentWrapper>
<Title />
<Body />
<Link />
</ContentWrapper>
</Wrapper>
FAQs
Basic components to build out sites.
The npm package @bodiless/card receives a total of 11 weekly downloads. As such, @bodiless/card popularity was classified as not popular.
We found that @bodiless/card demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.