Cards
A button triggers an event or action. They let users know what will happen next.
Card with image
Card with just an image.
1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import Card from '@neoKit/cards';
const CardsExample = () => {
return (
<Cards
src="https://images.pexels.com/photos/2033997/pexels-photo-2033997.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="Flower and sky"
></Cards>
)
};
export default CardsExample;Card with text
Card with just text.
This is the title
Lorem ipsum dolor, sit amet cons ectetur adipis icing elit. Praesen tium, quibusdam facere quo laborum maiores sequi nam tenetur laud.
1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import Card from '@neoKit/cards';
const CardWithTextExample = () => {
return (
<Cards
text="This is the title"
title="Lorem ipsum dolor, sit amet cons ectetur adipis icing elit. Praesen tium, quibusdam facere quo laborum maiores sequi nam tenetur laud."
></Cards>
)
};
export default CardWithTextExample;Card with image and text
Card with just text.
This is the title
Lorem ipsum dolor, sit amet cons ectetur adipis icing elit. Praesen tium, quibusdam facere quo laborum maiores sequi nam tenetur laud.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';
import Card from '@neoKit/cards';
const CardWithTextAndImageExample = () => {
return (
<Cards
src="https://images.pexels.com/photos/2033997/pexels-photo-2033997.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="Flower and sky"
text="This is the title"
title="Lorem ipsum dolor, sit amet cons ectetur adipis icing elit. Praesen tium, quibusdam facere quo laborum maiores sequi nam tenetur laud."
></Cards>
)
};
export default CardWithTextAndImageExample;Card horizontal
Card with top image and text side-by-side
This is the title
Lorem ipsum dolor, sit amet cons ectetur adipis icing elit. Praesen tium, quibusdam facere quo laborum maiores sequi nam tenetur laud.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import Card from '@neoKit/cards';
const HorizontalExample = () => {
return (
<Cards
src="https://images.pexels.com/photos/2033997/pexels-photo-2033997.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="Flower and sky"
text="This is the title"
title="Lorem ipsum dolor, sit amet cons ectetur adipis icing elit. Praesen tium, quibusdam facere quo laborum maiores sequi nam tenetur laud."
appearance="horizontal"
></Cards>
)
};
export default HorizontalExample;Card image with text over
Card with backrgound image and text
This is the title
Lorem ipsum dolor, sit amet cons ectetur adipis icing elit. Praesen tium, quibusdam facere quo laborum maiores sequi nam tenetur laud.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';
import Card from '@neoKit/cards';
const OverlayCardButton = () => {
return (
<Cards
src="https://images.pexels.com/photos/1274260/pexels-photo-1274260.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="Flower and sky"
alt="Flower and sky"
text="This is the title"
title="Lorem ipsum dolor, sit amet cons ectetur adipis icing elit. Praesen tium, quibusdam facere quo laborum maiores sequi nam tenetur laud."
appearance="overlay"
></Cards>
};
export default OverlayCardButton;