Welcome to the StepOne components documentation
StepOne Fundation
StepOne Modules
Cards
We have different components of cards
Select Props
| Name | Use | Type | Definition |
| id | optional | string | Identifies the card item |
| horizontal | optional | boolean | Add horizontal card |
| className | optional | string | Add diffrents classes to the card |
| onClick | optional | Function | Allows to specify a function to be called when the card is clicked |
| children | optional | any | Allows to pass child components or elements to the card component |
Card
In this component we have vertical and horizontal variants
Examples
Vertical Card
Example with vertical card
semantic
12 Apr 2023
This is a title
And this is a subtitleLorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae doloribus illum nam est necessitatibus voluptatibus quam quae iusto ea consequuntur dolores saepe rem porro quasi, quis optio dolor consequatur perferendis voluptates temporibus corrupti veritatis error ipsa. Perspiciatis et voluptate totam magni vel magnam debitis est rem quisquam, ipsum, placeat culpa?
Horizontal Card
Example with horizontal card by adding horizontal props
semantic
12 Apr 2023This is a title
And this is a subtitleLorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae doloribus illum nam est necessitatibus voluptatibus quam quae iusto ea consequuntur dolores saepe rem porro quasi, quis optio dolor consequatur perferendis voluptates temporibus corrupti veritatis error ipsa. Perspiciatis et voluptate totam magni vel magnam debitis est rem quisquam, ipsum, placeat culpa?
Figure Card
Example
Figure Card
Example with Figure Card.
00
This is a title
This is a Figure in horizontal disposition
Mansory Card
In this component we have vertical and horizontal variants
Examples
Vertical Mansory Card
Vertical Mansory Card example.
semantic
This is a title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam ea voluptates, facilis dolore dignissimos eum accusamus vitae accusantium dolores veritatis maiores deserunt unde natus similique omnis sit quaerat! At, asperiores.
Horizontal Mansory Card
Horizontal Mansory Card example
semantic
This is a title
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam ea voluptates, facilis dolore dignissimos eum accusamus vitae accusantium dolores veritatis maiores deserunt unde natus similique omnis sit quaerat! At, asperiores.
Location Map Card
Example
semantic
Location, location city
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur, voluptate!
Icon Card
Example
Icon Card Title
This is the body text of the Icon Card component.
Teaser Card
Example
Drag and Drop Cards
Example
Start
Phase 1
Phase 1
Phase 1
Placeholder