@schibstedspain/sui-card
v7.2.2
Published
The SUI-Card 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
25
Maintainers
Readme
Sui-card React Component
The SUI-Card 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.
Demo page
- Check out a Sui-Card component demo here.
Usage
The SUI-Card allows to pass custom content in the primary placeholder and also provides a sui-Card-primary
class as a wrapper. This primary content is required.
Secondary content might be passed or not to SuiCard component. If content is provided will be rendered inside a generic div sui-Card-secondary
wrapper.
If no content is provided this contained will not be rendered at all.
Check out this example below
ReactDom.render(
<SuiCard className={'myCustom-class'}
primary={
<a href={images[0].link}><img src={images[0].src} /></a>
}
secondary={[
<div>
<h2 className='sui-Card-title'>
This is the Card Title
</h2>
<p className='sui-Card-description'>
This is the description
</p>
</div>
}
/>,
document.getElementById('main')
);
Setting a custom className
The div
Card wrapper has a default sui-Card
class.
You can override it defining a custom class by setting the proptype
className
as follows:
ReactDom.render(
<SuiCard className={'myCustom-class'}
primary={
<a href={images[0].link}><img src={images[0].src} /></a>
}
secondary={[
<div>
<h2 className='sui-Card-title'>
This is the Card Title
</h2>
<p className='sui-Card-description'>
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(
<SuiCard landscapeLayout
primary={
<a href={images[0].link}><img src={images[0].src} /></a>
}
secondary={[
<div>
<h2 className='sui-Card-title'>
This is the Card Title
</h2>
<p className='sui-Card-description'>
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(
<SuiCard landscapeLayout contentFirst
primary={
<a href={images[0].link}><img src={images[0].src} /></a>
}
secondary={[
<div>
<h2 className='sui-Card-title'>
This is the Card Title
</h2>
<p className='sui-Card-description'>
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'
}];
Installation
To run the component and play with the examples you have to:
Download files from GitHub repo.
$ git clone https://github.com/scm-spain/sui-card
$ cd sui-card
Install dependencies.
$ npm install
// Install npm dependencies from package.json
Launch the development environment.
$ npm run dev
// Run development environment- Go to localhost:8080
Bundle
In order to generate the bundle including all React dependencies and the component logic we need to bundle a single JS file running the following command:
$ npm run build
Testing
Execute a complete test by running:
There are two options for executing tests:
* Single mode: `$ npm test`
* Watch mode: `$ npm run test:watch`
## Linting
Linting
We rely on SCSS Lint for , you can run specific test for linting JS and SASS:
SASS: (SASS linting rules specified in file .scss-lint.yml
)
$ npm run lint:sass
NPM
The SUI-Card component is available as a NPM package here:
npm install @schibstedspain/sui-card