@schibstedspain/sui-card-composable
v1.5.0
Published
The CardComposable component features a placeholder to portray a custom primary and a secondary content. So you can set an image, slider or any media component in one and some other content in the other.
Downloads
4
Readme
CardComposable
The CardComposable component features a placeholder to portray a custom primary and a secondary content. So you can set an image, slider or any media component in one and some other content in the other.
Usage
The SUI-CardComposable allows to pass custom content in the primary placeholder and also provides a sui-CardComposable-primary
class as a wrapper. This primary content is required.
Secondary content might be passed or not to SuiCardComposable component. If content is provided will be rendered inside a generic div sui-CardComposable-secondary
wrapper.
If no content is provided this contained will not be rendered at all.
Check out this example below
ReactDom.render(
<SuiCardComposable className={'myCustom-class'}
primary={
<a href={images[0].link}><img src={images[0].src} /></a>
}
secondary={[
<div>
<h2>
This is the Card Title
</h2>
<p>
This is the description
</p>
</div>
}
/>,
document.getElementById('main')
);
Setting a custom className
The div
Card wrapper has a default sui-CardComposable
class.
You can override it defining a custom class by setting the proptype
className
as follows:
ReactDom.render(
<SuiCardComposable className={'myCustom-class'}
primary={
<a href={images[0].link}><img src={images[0].src} /></a>
}
secondary={[
<div>
<h2>
This is the Card Title
</h2>
<p>
This is the description
</p>
</div>
}
/>,
document.getElementById('main')
);
Card layout Orientation
The default Card orientation is portrait mode. Use the landscapeLayout={true}
parameter to set it landscape where the primary
placeholder aligns to the left and the secondary
to the right:
ReactDom.render(
<SuiCardComposable landscapeLayout
primary={
<a href={images[0].link}><img src={images[0].src} /></a>
}
secondary={[
<div>
<h2>
This is the Card Title
</h2>
<p>
This is the description
</p>
</div>
}
/>,
document.getElementById('main')
);
Content First Property
When landscapeLayout={true}
you can also set secondary content placeholder rendered before primary by setting contentFirst={}
to true
:
ReactDom.render(
<SuiCardComposable landscapeLayout contentFirst
primary={
<a href={images[0].link}><img src={images[0].src} /></a>
}
secondary={[
<div>
<h2>
This is the Card Title
</h2>
<p>
This is the description
</p>
</div>
}
/>,
document.getElementById('main')
);
Data model used in this example
Use an array of objects:
const images = [{
src: 'https://scontent-mad1-1.cdninstagram.com/t51.2885-15/e15/11199623_633712610062793_1285693904_n.jpg',
type: 'image',
alt: 'Test',
link: 'https://www.instagram.com/p/TNUdPKpMgM/?taken-by=davecarter'
}];