Card

import {Provider} from '@clayui/core';
import Card from '@clayui/card';
import Button from '@clayui/button';
import React from 'react';

export default function App() {
  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <div className="col-md-5">
          <Card>
            <Card.Body>
              <Card.Description displayType="title">
                {'Card Title'}
              </Card.Description>
              <Card.Description truncate={false} displayType="text">
                {
                  'Some quick example text to build on the card title and make up the bulk of the card content.'
                }
              </Card.Description>
              <Button>{'Go somewhere'}</Button>
            </Card.Body>
          </Card>
        </div>
      </div>
    </Provider>
  );
}

import {Provider} from '@clayui/core';
import Card from '@clayui/card';
import React from 'react';

export default function App() {
  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <Card horizontal>
          <Card.Row>
            <div className="autofit-col">
              <img
                alt="thumbnail"
                className="card-item-first"
                src="https://clayui.com/images/thumbnail_placeholder.gif"
                style={{width: '150px'}}
              />
            </div>
            <div className="autofit-col autofit-col-expand autofit-col-gutters">
              <section className="autofit-section">
                <Card.Description displayType="title">
                  {'So ristretto cappuccino'}
                </Card.Description>
                <Card.Description truncate={false} displayType="text">
                  {'Wings eu, pumpkin spice robusta.'}
                </Card.Description>
              </section>
            </div>
          </Card.Row>
        </Card>
      </div>
    </Provider>
  );
}

import {Provider} from '@clayui/core';
import Card from '@clayui/card';
import Icon from '@clayui/icon';
import Sticker from '@clayui/sticker';
import Label from '@clayui/label';
import React from 'react';

export default function App() {
  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <div className="col-md-4">
          <Card displayType="file">
            <Card.AspectRatio className="card-item-first">
              <div className="aspect-ratio-item aspect-ratio-item-center-middle aspect-ratio-item-fluid card-type-asset-icon">
                <Icon symbol="documents-and-media" />
              </div>
              <Sticker displayType="danger" position="bottom-left">
                {'DOC'}
              </Sticker>
            </Card.AspectRatio>
            <Card.Body>
              <Card.Row>
                <div className="autofit-col autofit-col-expand">
                  <section className="autofit-section">
                    <Card.Description displayType="title">
                      {'deliverable.doc'}
                    </Card.Description>
                    <Card.Description displayType="subtitle">
                      {'Stevie Ray Vaughn'}
                    </Card.Description>
                    <Card.Caption>
                      <Label displayType="success">{'Approved'}</Label>
                    </Card.Caption>
                  </section>
                </div>
              </Card.Row>
            </Card.Body>
          </Card>
        </div>
      </div>
    </Provider>
  );
}

import {Provider} from '@clayui/core';
import {ClayCardWithInfo} from '@clayui/card';
import React, {useState} from 'react';

export default function App() {
  const [value, setValue] = useState(false);

  return (
    <Provider spritemap="/icons.svg">
      <div className="row">
        <div className="col-md-4">
          <ClayCardWithInfo
            actions={[
              {
                label: 'clickable',
                onClick: () => {
                  alert('you clicked!');
                },
              },
              {type: 'divider'},
              {
                href: '#',
                label: 'linkable',
              },
            ]}
            description="A cool description"
            href="#"
            labels={[
              {
                displayType: 'success',
                value: 'Awesome',
              },
              {
                displayType: 'danger',
                value: 'Crazy',
              },
            ]}
            onSelectChange={(newVal) => setValue(newVal)}
            selected={value}
            stickerProps={{
              content: 'DOC',
              displayType: 'danger',
            }}
            title="Selectable File"
          />
        </div>
      </div>
    </Provider>
  );
}

import {Provider} from '@clayui/core';
import {ClayCardWithNavigation} from '@clayui/card';
import Icon from '@clayui/icon';
import React, {useState} from 'react';

export default function App() {
  const [value, setValue] = useState(false);

  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <div className="row">
          <div className="col-md-4">
            <ClayCardWithNavigation
              description="Pick and choose your layout..."
              onClick={() => alert('clicked')}
              title="onClick Card with icon"
            >
              <Icon symbol="page-template" />
            </ClayCardWithNavigation>
          </div>
        </div>
      </div>
    </Provider>
  );
}

import {Provider} from '@clayui/core';
import {ClayCardWithUser} from '@clayui/card';
import React, {useState} from 'react';

export default function App() {
  const [value, setValue] = useState(false);

  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <div className="row">
          <div className="col-md-4">
            <ClayCardWithUser
              actions={[
                {
                  label: 'clickable',
                  onClick: () => {
                    alert('you clicked!');
                  },
                },
                {type: 'divider'},
                {
                  href: '#',
                  label: 'linkable',
                },
              ]}
              description="Assistant to the regional manager"
              href="#"
              labels={[
                {
                  displayType: 'success',
                  value: 'Awesome',
                },
                {
                  displayType: 'danger',
                  value: 'Crazy',
                },
              ]}
              name="Abraham Kuyper"
              onSelectChange={() => {}}
              selected={true}
            />
          </div>
        </div>
      </div>
    </Provider>
  );
}

import {Provider} from '@clayui/core';
import {ClayCardWithHorizontal} from '@clayui/card';
import React, {useState} from 'react';

export default function App() {
  const [value, setValue] = useState(false);

  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <div className="row">
          <div className="col-md-4">
            <ClayCardWithHorizontal
              actions={[
                {
                  label: 'clickable',
                  onClick: () => {
                    alert('you clicked!');
                  },
                },
                {type: 'divider'},
                {
                  href: '#',
                  label: 'linkable',
                },
              ]}
              href="#"
              onSelectChange={setValue}
              selected={value}
              title="Selectable Folder"
            />
          </div>
        </div>
      </div>
    </Provider>
  );
}