@justeat/f-card

f-card

Card Component – Used for providing wrapper card styling to an element (or group of elements).

---

Usage

1. Install the module using NPM or Yarn:

   yarn add @justeat/f-card
   

   npm install @justeat/f-card
   

2. Import the component

   You can import it in your Vue SFC like this (please note that styles have to be imported separately):

   import CardComponent from '@justeat/f-card';
   import '@justeat/f-card/dist/f-card.css';
   
   export default {
       components: {
           CardComponent
       }
   }
   

   If you are using Webpack, you can import the component dynamically to separate the header bundle from the main bundle.client.js:

   import '@justeat/f-card/dist/f-card.css';
   
   export default {
       components: {
           ...
           CardComponent: () => import(/* webpackChunkName: "vue-card" */ '@justeat/f-card')
       }
   }
   
   

Development

Running below yarn commands from the component folder, starts a development server displaying a preview example of the component implementation.

# cd /packages/f-card
yarn install

# followed by
yarn demo

Storybook

The component is also available to demo through our storybook instance which can be served locally by running yarn storybook:serve from the mono-repo root.

Props

f-card has a number of props that allow you to customise its functionality.

The props that can be defined are as follows:

Prop	Required	Type	Default	Description
locale	false	string	en-GB	Sets the locale of the component (which determines what theme and translations to use. If the application consuming the f-card component is using the vue i18n module, then the locale from that module will be used when this prop isn't defined. When this prop is defined, it takes precedence over the locale defined by the i18n module. If not defined and the i18n module isn't present, the default locale used is en-GB.
isRounded	false	boolean	false	When set to true, rounded corners are applied to the card component.
hasOutline	false	boolean	false	When set to true, an outline is applied to the card component.
isPageContentWrapper	false	boolean	false	When set to true, applies styles to make the card act like a page content wrapper. The card will be full width on narrow devices, and then a fixed width above a certain breakpoint width (about 480px), when the card will be centred on the page.
cardHeadingPosition	false	string	left	Sets the text alignment of the card component's heading. When set to left the heading will aligned to the left. When set to center the heading will be centrally aligned. When set to right the heading will be aligned to the right.