Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | 12x 12x 15x 15x 13x 13x 15x 15x | // Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
import React, { Component } from 'react';
import { StandardIcon } from '../icons/standard/example';
import classNames from 'classnames';
/**
* Card Header
*/
export const CardHeader = props => {
const { className, title, href, symbol, action } = props;
return (
<div className={classNames('slds-card__header slds-grid', className)}>
<header className="slds-media slds-media_center slds-has-flexi-truncate">
{symbol && (
<div className="slds-media__figure">
<StandardIcon
className="slds-icon_small"
symbol={symbol}
assistiveText={symbol}
title={symbol}
/>
</div>
)}
<div className="slds-media__body">
<h2 className="slds-card__header-title">
{href ? (
<a
href="#"
className="slds-card__header-link slds-truncate"
title={title}
onClick={e => e.preventDefault()}
>
<span>{title}</span>
</a>
) : (
<span className="slds-truncate" title={title}>
<span className="slds-text-heading_small">{title}</span>
</span>
)}
</h2>
</div>
{action && <div className="slds-no-flex">{action}</div>}
</header>
</div>
);
};
/**
* Card Body
*/
export const CardBody = props => {
const { className, hasPadding } = props;
return (
<div
className={classNames(
'slds-card__body',
hasPadding && 'slds-card__body_inner',
className
)}
>
{props.children}
</div>
);
};
/**
* Card Footer
*/
export const CardFooter = props => {
const { className, linkTabIndex } = props;
return (
<footer className={classNames('slds-card__footer', className)}>
{props.children && (
<a
className="slds-card__footer-action"
href="#"
tabIndex={linkTabIndex}
onClick={e => e.preventDefault()}
>
{props.children}
</a>
)}
</footer>
);
};
class Card extends Component {
render() {
const { className, children, hasCardBoundary } = this.props;
return (
<article
className={classNames(
'slds-card',
hasCardBoundary && 'slds-card_boundary',
className
)}
>
{children}
</article>
);
}
}
export default Card;
|