import React, { CSSProperties } from 'react';
import { Card, Container, Row, Col } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import CategoryIcon from './CategoryIcon';

export default ({ document }) => {

    return (
        <Link to={ `/documents/${document.resource.id}` } style={ linkStyle }>
            <Card>
                <Card.Body>
                        <Row>
                            <Col style={ { flex: '0 0 50px' } }>
                                <CategoryIcon size="50" category={ document.resource.type } />
                            </Col>
                            <Col>
                                <Row>
                                    <Col><strong>{ document.resource.identifier }</strong></Col>
                                </Row>
                                <Row>
                                    <Col>{ document.resource.shortDescription }</Col>
                                </Row>
                            </Col>
                        </Row>
                </Card.Body>
            </Card>
        </Link>
    );

};

const linkStyle: CSSProperties = {
    textDecoration: 'none',
    color: 'black'
};

import React, { CSSProperties } from 'react';
import { Card, Container, Row, Col } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import CategoryIcon from './CategoryIcon';

export default ({ document }) => {

    return (
        <Link to={ `/documents/${document.resource.id}` } style={ linkStyle }>
            <Card>
                <Card.Body>
                    <Container>
                        <Row>
                            <Col style={ { flex: '0 0 50px' } }>
                                <CategoryIcon size="50" category={ document.resource.type } />
                            </Col>
                            <Col>
                                <Row>
                                    <Col><strong>{ document.resource.identifier }</strong></Col>
                                </Row>
                                <Row>
                                    <Col>{ document.resource.shortDescription }</Col>
                                </Row>
                            </Col>
                        </Row>
                    </Container>
                </Card.Body>
            </Card>
        </Link>
    );

};

const linkStyle: CSSProperties = {
    textDecoration: 'none',
    color: 'black'
};

--- 
+++ 
@@ -9,7 +9,6 @@
         <Link to={ `/documents/${document.resource.id}` } style={ linkStyle }>
             <Card>
                 <Card.Body>
-                    <Container>
                         <Row>
                             <Col style={ { flex: '0 0 50px' } }>
                                 <CategoryIcon size="50" category={ document.resource.type } />
@@ -23,7 +22,6 @@
                                 </Row>
                             </Col>
                         </Row>
-                    </Container>
                 </Card.Body>
             </Card>
         </Link>
Fix margins in document teaser
