Card News

import {
  CardNews,
  CardNewsHeader,
  CardNewsTags,
  CardNewsDate,
  CardNewsImage,
  CardNewsContent,
  CardNewsTitle,
  CardNewsDescription,
  CardNewsResources,
  CardNewsResourceItem,
  CardNewsAuthor,
  CardNewsFooter,
  Tag,
  Button,
} from "@medway-ui/core";
import {
  Bookmark,
  IndexHigh,
  PaperclipAttechmentTilt,
  Circle,
  ArrowRightMd,
  Check,
  Play,
  CheckboxCheck,
} from "@medway-ui/icons";
 
<CardNews>
  <CardNewsHeader>
    <CardNewsTags>
      <Tag variant="regular" icon={<Bookmark />}>Studied topic</Tag>
      <Tag variant="regular-soft" icon={<IndexHigh />}>High prevalence</Tag>
      <Tag variant="regular-soft" icon={<PaperclipAttechmentTilt />}>Guideline update</Tag>
      <Tag variant="emphasis-soft" icon={<Circle />}>New</Tag>
    </CardNewsTags>
    <CardNewsDate>May 17, 2026</CardNewsDate>
  </CardNewsHeader>
  <CardNewsImage src="/cover.jpg" alt="Surgical team operating in an operating room" />
  <CardNewsContent>
    <Tag variant="gray-soft">Focus: Heart Failure</Tag>
    <CardNewsTitle>Brazilian Guideline for Heart Failure 2024 — SBC</CardNewsTitle>
    <CardNewsDescription>
      The SBC published a new guideline with changes in the management of HF with reduced ejection fraction.
    </CardNewsDescription>
    <CardNewsResources label="Lesson items being updated">
      <CardNewsResourceItem iconLeft={<Play />}>Full lesson / video class</CardNewsResourceItem>
      <CardNewsResourceItem iconLeft={<CheckboxCheck />}>Questions</CardNewsResourceItem>
    </CardNewsResources>
    <CardNewsAuthor src="/reviewer.jpg" name="Dr. Manoella Kfouri Ricciardi" role="Reviewer" />
  </CardNewsContent>
  <CardNewsFooter>
    <Button variant="regular" size="md" iconRight={<ArrowRightMd />}>Read more</Button>
    <Button variant="emphasis-basic" size="md" iconLeft={<Check />}>Mark as read</Button>
  </CardNewsFooter>
</CardNews>

import {
  CardNews,
  CardNewsHeader,
  CardNewsTags,
  CardNewsDate,
  CardNewsImage,
  CardNewsContent,
  CardNewsTitle,
  CardNewsDescription,
  CardNewsResources,
  CardNewsResourceItem,
  CardNewsAuthor,
  CardNewsFooter,
  Tag,
  Button,
} from "@medway-ui/core";
import {
  Bookmark,
  IndexHigh,
  PaperclipAttechmentTilt,
  ArrowRightMd,
  Check,
  FileDocument,
  BookOpen,
} from "@medway-ui/icons";
 
<CardNews isRead>
  <CardNewsHeader>
    <CardNewsTags>
      <Tag variant="regular" icon={<Bookmark />}>Studied topic</Tag>
      <Tag variant="regular-soft" icon={<IndexHigh />}>High prevalence</Tag>
      <Tag variant="regular-soft" icon={<PaperclipAttechmentTilt />}>Guideline update</Tag>
    </CardNewsTags>
    <CardNewsDate>May 17, 2026</CardNewsDate>
  </CardNewsHeader>
  <CardNewsImage src="/cover.jpg" alt="Surgical team operating in an operating room" />
  <CardNewsContent>
    <Tag variant="gray-soft">Focus: Heart Failure</Tag>
    <CardNewsTitle>Brazilian Guideline for Heart Failure 2024 — SBC</CardNewsTitle>
    <CardNewsDescription>
      The SBC published a new guideline with changes in the management of HF with reduced ejection fraction.
    </CardNewsDescription>
    <CardNewsResources label="Lesson items being updated">
      <CardNewsResourceItem iconLeft={<FileDocument />}>Summary sheet</CardNewsResourceItem>
      <CardNewsResourceItem iconLeft={<BookOpen />}>Chapter</CardNewsResourceItem>
    </CardNewsResources>
    <CardNewsAuthor src="/reviewer.jpg" name="Dr. Manoella Kfouri Ricciardi" role="Reviewer" />
  </CardNewsContent>
  <CardNewsFooter>
    <Button variant="regular" size="md" iconRight={<ArrowRightMd />}>Read more</Button>
    <Button variant="emphasis-basic" size="md" iconLeft={<Check />}>Mark as unread</Button>
  </CardNewsFooter>
</CardNews>

import {
  CardNews,
  CardNewsDate,
  CardNewsDescription,
  CardNewsResources,
  CardNewsResourceItem,
  CardNewsAuthor,
  CardNewsFooter,
  Button,
} from "@medway-ui/core";
import { ArrowRightMd, Bolt, Flashcard } from "@medway-ui/icons";
 
<CardNews variant="compact">
  <div className="flex flex-col gap-1.5">
    <span className="text-md font-semibold leading-md text-primary-foreground">
      Brazilian Guideline for Heart Failure 2024 — SBC
    </span>
    <div className="flex items-center gap-2">
      <span className="text-xs font-semibold leading-xs text-gray-foreground-muted">Guideline update</span>
      <span className="text-xs font-semibold leading-xs text-gray-foreground-muted">·</span>
      <CardNewsDate className="text-gray-foreground-muted">May 17, 2026</CardNewsDate>
    </div>
  </div>
  <CardNewsDescription className="text-sm leading-sm">
    The SBC published a new guideline with changes in the management of HF.
  </CardNewsDescription>
  <CardNewsResources label="Lesson items being updated">
    <CardNewsResourceItem iconLeft={<Bolt />}>Flash video class</CardNewsResourceItem>
    <CardNewsResourceItem iconLeft={<Flashcard />}>Flashcards</CardNewsResourceItem>
  </CardNewsResources>
  <CardNewsFooter className="justify-between gap-4">
    <CardNewsAuthor
      src="/reviewer.jpg"
      name="Dr. Manoella Kfouri Ricciardi"
      role="Reviewer"
    />
    <Button variant="regular" size="sm" iconRight={<ArrowRightMd size={16} />} containerClassName="shrink-0">
      Ver mais
    </Button>
  </CardNewsFooter>
</CardNews>

import {
  CardNews,
  CardNewsBody,
  CardNewsHeader,
  CardNewsTags,
  CardNewsDate,
  CardNewsImage,
  CardNewsContent,
  CardNewsTitle,
  CardNewsDescription,
  CardNewsResources,
  CardNewsResourceItem,
  CardNewsAuthor,
  CardNewsFooter,
  Tag,
  Button,
} from "@medway-ui/core";
import { PaperclipAttechmentTilt, ArrowRightMd, EditPencilLine2, Data } from "@medway-ui/icons";
 
<CardNews orientation="horizontal">
  {/* Left column: all content */}
  <CardNewsBody>
    <CardNewsHeader>
      <CardNewsTags>
        <Tag variant="regular-soft" icon={<PaperclipAttechmentTilt />}>Guideline update</Tag>
      </CardNewsTags>
      <CardNewsDate className="text-gray-foreground-muted">May 17, 2026</CardNewsDate>
    </CardNewsHeader>
    <CardNewsContent className="gap-6">
      <CardNewsTitle className="mb-0 text-base leading-6">
        Brazilian Guideline for Heart Failure 2024 — SBC
      </CardNewsTitle>
      <CardNewsDescription className="text-sm font-medium leading-5">
        The SBC published a new guideline with changes in the management of HF with reduced ejection fraction.
      </CardNewsDescription>
      <CardNewsResources label="Lesson items being updated">
        <CardNewsResourceItem iconLeft={<EditPencilLine2 />}>Pre-class / post-class path</CardNewsResourceItem>
        <CardNewsResourceItem iconLeft={<Data />}>Vector bank</CardNewsResourceItem>
      </CardNewsResources>
    </CardNewsContent>
    <CardNewsFooter className="justify-between gap-4">
      <CardNewsAuthor src="/reviewer.jpg" name="Dr. Manoella Kfouri Ricciardi" role="Reviewer" />
      <Button variant="regular" size="sm" iconRight={<ArrowRightMd size={16} />} containerClassName="shrink-0">
        Read more
      </Button>
    </CardNewsFooter>
  </CardNewsBody>
 
  {/* Right column: image */}
  <CardNewsImage src="/cover.jpg" alt="Surgical team operating in an operating room" />
</CardNews>