@bodiless/card
Advanced tools
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 505 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
Socket CEO Feross Aboukhadijeh joins Risky Business Weekly to unpack recent npm phishing attacks, their limited impact, and the risks if attackers get smarter.
Product
Socket’s new Tier 1 Reachability filters out up to 80% of irrelevant CVEs, so security teams can focus on the vulnerabilities that matter.
Research
/Security News
Ongoing npm supply chain attack spreads to DuckDB: multiple packages compromised with the same wallet-drainer malware.