Fain Component Library

Card 

<!-- Start: @card--default -->
<style>
    .index__card___1pDOX {
        margin-bottom: 1rem;
        border: 1px solid #e6e6e6;
        border-radius: 0;
        background: #fefefe;
        box-shadow: none;
        overflow: hidden;
        color: #0a0a0a;
    }
    
    .index__card___1pDOX> :last-child {
        margin-bottom: 0;
    }
    
    .index__card-divider___3Cj7P {
        padding: 1rem;
        background: #e6e6e6;
    }
    
    .index__card-divider___3Cj7P> :last-child {
        margin-bottom: 0;
    }
    
    .index__card-section___2-cmD {
        padding: 1rem;
    }
    
    .index__card-section___2-cmD> :last-child {
        margin-bottom: 0;
    }
    
    .index__card___1pDOX {
        margin-bottom: 1rem;
        border: 1px solid #e6e6e6;
        border-radius: 0;
        background: #fefefe;
        box-shadow: none;
        overflow: hidden;
        color: #0a0a0a;
    }
    
    .index__card___1pDOX> :last-child {
        margin-bottom: 0;
    }
    
    .index__card-divider___3Cj7P {
        padding: 1rem;
        background: #e6e6e6;
    }
    
    .index__card-divider___3Cj7P> :last-child {
        margin-bottom: 0;
    }
    
    .index__card-section___2-cmD {
        padding: 1rem;
    }
    
    .index__card-section___2-cmD> :last-child {
        margin-bottom: 0;
    }
    
    .index__card___1pDOX {
        margin-bottom: 1rem;
        border: 1px solid #e6e6e6;
        border-radius: 0;
        background: #fefefe;
        box-shadow: none;
        overflow: hidden;
        color: #0a0a0a;
    }
    
    .index__card___1pDOX> :last-child {
        margin-bottom: 0;
    }
    
    .index__card-divider___3Cj7P {
        padding: 1rem;
        background: #e6e6e6;
    }
    
    .index__card-divider___3Cj7P> :last-child {
        margin-bottom: 0;
    }
    
    .index__card-section___2-cmD {
        padding: 1rem;
    }
    
    .index__card-section___2-cmD> :last-child {
        margin-bottom: 0;
    }
    
    .index__img___1leFm {
        -ms-interpolation-mode: bicubic;
        border-style: none;
        display: inline-block;
        height: auto;
        max-width: 100%;
        vertical-align: middle;
    }
</style>
<div style="width:300px;" class="index__card___1pDOX">
    <div class="index__card-divider___3Cj7P">A Divider</div><img src="http://foundation.zurb.com/sites/docs/assets/img/generic/rectangle-1.jpg" class="index__img___1leFm" role="presentation" />
    <div class="index__card-section___2-cmD">
        <h4>This is a card</h4>
        <p>It has an easy to override visual style.</p>
    </div>
</div>
<!-- End: @card--default -->
 
import React from 'react';
import Card from 'fain/containers/Card';
import Img from 'fain/globals/Img';

export default function CardExample(props) {
  return (
    <Card style={{ width: '300px' }}>
      <Card.Divider>
        A Divider
      </Card.Divider>
      <Img src="http://foundation.zurb.com/sites/docs/assets/img/generic/rectangle-1.jpg" />
      <Card.Section>
        <h4>This is a card</h4>
        <p>It has an easy to override visual style.</p>
      </Card.Section>
    </Card>
  );
}

/* No context defined for this component. */
  • Content: 
    // @flow

import classNames from 'classnames';
import React from 'react';

import styles from './index.scss';

type Props = {
  className: ClassName,
  componentClass: string,
};

function Card(props: Props) {
  const { componentClass: Component, ...other } = props;
  return (
    <Component
      {...other}
      className={classNames(props.className, styles.card)}
    />
  );
}

Card.defaultProps = {
  componentClass: 'div',
};

export default Card;
  • URL: /components/raw/card/Card.jsx
  • Filesystem Path: src/containers/Card/Card.jsx
  • Size: 456 Bytes
  • Content: 
    // @flow

import classNames from 'classnames';
import React from 'react';

import styles from './index.scss';

type Props = {
  className: ClassName,
  componentClass: string,
};

function CardDivider(props: Props) {
  const { componentClass: Component, ...other } = props;
  return (
    <Component
      {...other}
      className={classNames(props.className, styles.cardDivider)}
    />
  );
}

CardDivider.defaultProps = {
  componentClass: 'div',
};

export default CardDivider;
  • URL: /components/raw/card/Divider.jsx
  • Filesystem Path: src/containers/Card/Divider.jsx
  • Size: 484 Bytes
  • Content: 
    // @flow

import classNames from 'classnames';
import React from 'react';

import styles from './index.scss';

type Props = {
  className: ClassName,
  componentClass: string,
};

function CardSection(props: Props) {
  const { componentClass: Component, ...other } = props;
  return (
    <Component
      {...other}
      className={classNames(props.className, styles.cardSection)}
    />
  );
}

CardSection.defaultProps = {
  componentClass: 'div',
};

export default CardSection;
  • URL: /components/raw/card/Section.jsx
  • Filesystem Path: src/containers/Card/Section.jsx
  • Size: 484 Bytes
  • Content: 
    // @flow

import Card from './Card';
import Divider from './Divider';
import Section from './Section';

Card.Divider = Divider;
Card.Section = Section;

export default Card;
  • URL: /components/raw/card/index.js
  • Filesystem Path: src/containers/Card/index.js
  • Size: 174 Bytes
  • Content: 
    @import 'fain/styles/base';
@import 'foundation-sites/scss/components/card';

@include foundation-card;
  • URL: /components/raw/card/index.scss
  • Filesystem Path: src/containers/Card/index.scss
  • Size: 104 Bytes

There are no notes for this item.