List card

import { ListCard, ListCardThumbnail, ListCardTitle, ListCardCaption, ListCardBody } from '@montage-ui/core';

const Demo = () => {
  return (
    <ListCard
      width="45%"
      sx={{ margin: 'auto' }}
    >
      <ListCardThumbnail
        src="https://static.wanted.co.kr/images/company/79/elpzxpmgh94xesrf__1080_790.png"
        alt="Wanted Company Image"
      />
      <ListCardBody>
        <ListCardTitle>Heading</ListCardTitle>
        <ListCardCaption>Caption</ListCardCaption>
        <ListCardCaption>Extra caption</ListCardCaption>
      </ListCardBody>
    </ListCard>
  );
}

export default Demo;

import { ToggleIcon, FlexBox, Checkbox, ListCard, ListCardTitle, ListCardBody, ListCardCaption, ListCardThumbnail, ListCardContent } from '@montage-ui/core';
import { IconBookmark, IconBookmarkFill } from '@montage-ui/icon';
import { useState } from 'react';

const Demo = () => {
  const [checked, setChecked] = useState(false);
  const [isBookmarked, setIsBookmarked] = useState(false);

  return (
    <ListCard
      sx={{ margin: 'auto' }}
      width="45%"
      leadingContent={(
        <ListCardContent variant="checkbox">
          <Checkbox
            checked={checked}
            onCheckedChange={setChecked}
          />
        </ListCardContent>
      )}
      trailingContent={(
        <ListCardContent variant="toggle-icon">
          <ToggleIcon
            activeColor="semantic.foreground.brand.primary"
            active={isBookmarked}
            onActiveChange={setIsBookmarked}
          >
            {isBookmarked ? <IconBookmarkFill /> : <IconBookmark />}
          </ToggleIcon>
        </ListCardContent>
      )}
    >
      <ListCardThumbnail
        src="https://static.wanted.co.kr/images/company/79/elpzxpmgh94xesrf__1080_790.png"
        alt="Wanted Company Image"
        width="240px"
      />
      <ListCardBody>
        <ListCardTitle>Heading</ListCardTitle>
        <ListCardCaption>Caption</ListCardCaption>
      </ListCardBody>
    </ListCard>
  );
}

export default Demo;

import { FlexBox, ListCard, ListCardTitle, ListCardCaption, ListCardBody, ListCardRow, ContentBadge, ListCardThumbnailSkeleton } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox gap="24px" flexDirection="column" alignItems="center" sx={{ width: '100%' }}>
      <ListCard width="45%">
        <ListCardThumbnailSkeleton animation={false} />
        <ListCardBody>
          <ListCardRow position="top" variant="badge">
            <ContentBadge color="neutral">Badge</ContentBadge>
          </ListCardRow>
          <ListCardTitle>Heading</ListCardTitle>
          <ListCardCaption>Caption</ListCardCaption>
        </ListCardBody>
      </ListCard>
      <ListCard width="45%">
        <ListCardThumbnailSkeleton animation={false} />
        <ListCardBody>
          <ListCardTitle>Heading</ListCardTitle>
          <ListCardCaption>Caption</ListCardCaption>
          <ListCardRow position="bottom" variant="badge">
            <ContentBadge color="neutral">Badge</ContentBadge>
          </ListCardRow>
        </ListCardBody>
      </ListCard>
    </FlexBox>
  );
}

export default Demo;

import { FlexBox, ListCard, ListCardThumbnail, ListCardTitle, ListCardCaption, ListCardBody } from '@montage-ui/core';

const Demo = () => {
  return (
    <FlexBox gap="24px" flexDirection="column" alignItems="center" sx={{ width: '100%' }}>
      <ListCard width="45%" platform="desktop">
        <ListCardThumbnail
          src="https://static.wanted.co.kr/images/company/79/elpzxpmgh94xesrf__1080_790.png"
          alt="Wanted Company Image"
        />
        <ListCardBody>
          <ListCardTitle>Heading</ListCardTitle>
          <ListCardCaption>platform: desktop</ListCardCaption>
          <ListCardCaption>Extra caption</ListCardCaption>
        </ListCardBody>
      </ListCard>

      <ListCard width="45%" platform="mobile">
        <ListCardThumbnail
          src="https://static.wanted.co.kr/images/company/79/elpzxpmgh94xesrf__1080_790.png"
          alt="Wanted Company Image"
        />
        <ListCardBody>
          <ListCardTitle>Heading</ListCardTitle>
          <ListCardCaption>platform: mobile</ListCardCaption>
          <ListCardCaption>Extra caption</ListCardCaption>
        </ListCardBody>
      </ListCard>
    </FlexBox>
  );
}

export default Demo;

import { ListCardSkeleton, ListCardThumbnailSkeleton, ListCardRowSkeleton, ListCardTitleSkeleton, ListCardCaptionSkeleton, ListCardBody } from '@montage-ui/core';

const Demo = () => {
  return (
    <ListCardSkeleton width="45%" sx={{ marginInline: 'auto' }}>
      <ListCardThumbnailSkeleton />
      <ListCardBody>
        <ListCardRowSkeleton />
        <ListCardTitleSkeleton />
        <ListCardCaptionSkeleton type="normal" />
        <ListCardCaptionSkeleton type="extra" />
        <ListCardRowSkeleton />
      </ListCardBody>
    </ListCardSkeleton>
  );
}

export default Demo;