SS Flippable Cards

Easy to use flippable cards for React and Next.js

Usage

The code to utilize the cards is very straight forward, you have your main container and then card items. Import the main class as below to get started:

import SSP from '/ss-flippable-cards'

Container

<SSPContainer/>

Container Props

style is used to add any inline styles to the container
center is used to center the items within the container **
evenly is used to space the items evenly within the container **
between is used to space-between the items within the container **

**Only one of these should be used at a time, as they are different ways to format the item layout within the container.

Card Item

<SSPItem/>

Card Item Sizing Props

The items can be sized responsively just by adding some of the props below:
xs_1 | xs_2 | xs_3 | xs_4 | sm_1 | sm_2 | sm_3 | sm_4 | md_1 | md_2 | md_3 | md_4 | lg_1 | lg_2 | lg_3 | lg_4 | xl_1 | xl_2 | xl_3 | xl_4 | xxl_1 | xxl_2 | xxl_3 | xxl_4

Each breakpoint can be used to give a responsive layout depending on the needs of your application. For instance:
<SSPItem xs_4 md_1 />
In the above example the card will have a full width on XS screens, and one quarter of the width on MD screens.

Card Item Sizing Breakpoints
XS: <576px
SM: >=576px
MD: >=768px
LG: >=992px
XL: >=1200px
XXL: >=1400px

Card Item Props

style is used for inline styling of the card (object) (*optional)
card_front_url is used to give the front facing image URL of the card (string)
card_front_alt is used to give the front facing image alt of the card (string) (*optional)
card_back_url is used to give the rear facing image URL of the card (string)
try_button is used to allow the use of the top button on the rear of the card (boolean) (*optional)
try_it_link is used to give a link for the top button on the rear of the card (string)
try_text is used to give the top button a different text other than "Try" if you wanted to use the button for something else (string) (*optional)
repo_link is used to give the bottom button a link that is on the back of the card (string)
repo_text is used to give the bottom button a different text other than "Repo" (string) (*optional)