diff --git a/src/components/LibraryCard.tsx b/src/components/LibraryCard.tsx
new file mode 100644
index 00000000..cb313f23
--- /dev/null
+++ b/src/components/LibraryCard.tsx
@@ -0,0 +1,191 @@
+import * as React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBuildingColumns } from "@fortawesome/free-solid-svg-icons";
+
+/**
+ * Size of the logo tile and the minimum height of a card's content, in
+ * pixels. 44px is the minimum comfortable touch target size.
+ */
+const TILE_SIZE = 44;
+
+/**
+ * Marks the card's main interactive element. Its ::after pseudo-element
+ * stretches over the whole card, so a click anywhere on the card activates
+ * it without adding the card itself to the tab order.
+ */
+const ACTION_ATTRIBUTE = "data-library-card-action";
+
+/** Props the card's interactive element must spread onto itself. */
+export type LibraryCardActionProps = {
+  [ACTION_ATTRIBUTE]: "";
+  "aria-describedby"?: string;
+};
+
+interface LibraryCardProps {
+  logoUrl?: string;
+  description?: string;
+  /**
+   * Renders the card's interactive element (a link or button carrying the
+   * library title), which must spread `actionProps` onto itself.
+   */
+  children: (actionProps: LibraryCardActionProps) => React.ReactNode;
+  /**
+   * Rendered below the card's main row and stacked over the stretched click
+   * target, so its controls stay clickable.
+   */
+  footer?: React.ReactNode;
+}
+
+/** Shown in the logo tile when a library has no logo or it fails to load. */
+const DefaultLibraryLogo: React.FC = () => (
+  <FontAwesomeIcon icon={faBuildingColumns} />
+);
+
+/*
+ * The frame around the logo or default logo. It shows as a blank tile while
+ * a logo loads.
+ */
+const tileStyle = {
+  height: TILE_SIZE,
+  width: TILE_SIZE,
+  flexShrink: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  p: "2px",
+  border: "1px solid",
+  borderColor: "ui.gray.light",
+  borderRadius: 2,
+  backgroundColor: "ui.white"
+} as const;
+
+/**
+ * One library in a list: a clickable card with a logo tile, the title, and
+ * an optional description. The description is attached to the interactive
+ * element with aria-describedby, so screen readers announce it with the
+ * title. The tile shows a generic library icon when there is no logo or the
+ * logo fails to load, and stays blank while the logo loads.
+ */
+const LibraryCard: React.FC<LibraryCardProps> = ({
+  logoUrl,
+  description,
+  children,
+  footer
+}) => {
+  const descriptionId = React.useId();
+  const [failedLogoUrl, setFailedLogoUrl] = React.useState<string>();
+  const showLogo = logoUrl && logoUrl !== failedLogoUrl;
+  const action = `[${ACTION_ATTRIBUTE}]`;
+
+  return (
+    <div
+      sx={{
+        position: "relative",
+        border: "solid",
+        borderColor: "ui.gray.medium",
+        borderRadius: "card",
+        backgroundColor: "ui.white",
+        boxShadow: "card",
+        px: 3,
+        py: 2,
+        transition: "box-shadow 150ms ease, border-color 150ms ease",
+        "@media (prefers-reduced-motion: reduce)": { transition: "none" },
+        "&:hover": {
+          boxShadow: "cardHover",
+          borderColor: "ui.gray.dark"
+        },
+        // A separate rule so browsers without :has() still get the hover
+        // above.
+        "&:hover:has([aria-disabled='true'])": {
+          boxShadow: "card",
+          borderColor: "ui.gray.medium"
+        },
+        [action]: {
+          color: "ui.link.primary",
+          fontWeight: "medium",
+          textDecoration: "none",
+          "&::after": {
+            content: '""',
+            position: "absolute",
+            inset: 0,
+            borderRadius: "card"
+          },
+          "&:focus-visible": { outline: "none" },
+          "&:focus-visible::after": {
+            outline: "3px solid",
+            outlineColor: "ui.blue.focus",
+            outlineOffset: "2px"
+          }
+        }
+      }}
+    >
+      <div
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          gap: 3,
+          minHeight: TILE_SIZE
+        }}
+      >
+        <div sx={tileStyle}>
+          {showLogo ? (
+            <img
+              src={logoUrl}
+              alt=""
+              loading="lazy"
+              decoding="async"
+              onError={() => setFailedLogoUrl(logoUrl)}
+              sx={{
+                height: "100%",
+                width: "100%",
+                objectFit: "contain"
+              }}
+            />
+          ) : (
+            <span
+              aria-hidden="true"
+              data-testid="default-library-logo"
+              sx={{ display: "flex", color: "ui.gray.dark" }}
+            >
+              <DefaultLibraryLogo />
+            </span>
+          )}
+        </div>
+        <div
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            flex: 1,
+            minWidth: 0
+          }}
+        >
+          <div>
+            {children({
+              [ACTION_ATTRIBUTE]: "",
+              ...(description ? { "aria-describedby": descriptionId } : {})
+            })}
+          </div>
+          {description && (
+            <div
+              id={descriptionId}
+              sx={{
+                fontSize: "-1",
+                color: "ui.gray.extraDark",
+                // Clamp long registry descriptions to two lines.
+                display: "-webkit-box",
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: "vertical",
+                overflow: "hidden"
+              }}
+            >
+              {description}
+            </div>
+          )}
+        </div>
+      </div>
+      {footer && <div sx={{ position: "relative", zIndex: 1 }}>{footer}</div>}
+    </div>
+  );
+};
+
+export default LibraryCard;
diff --git a/src/components/LibraryFilterList.tsx b/src/components/LibraryFilterList.tsx
index 478a35b6..3575321c 100644
--- a/src/components/LibraryFilterList.tsx
+++ b/src/components/LibraryFilterList.tsx
@@ -104,7 +104,21 @@ const LibraryFilterList: React.FC<LibraryFilterListProps> = ({
       {filterQuery && resultCount === 0 && (
         <p sx={{ pl: 2 }}>{NO_MATCH_MESSAGE}</p>
       )}
-      <ul id={resultsListId}>
+      {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
+      <ul
+        id={resultsListId}
+        // Keeps list semantics in Safari, which drops them from lists
+        // styled with listStyle: none.
+        role="list"
+        sx={{
+          listStyle: "none",
+          pl: 0,
+          maxWidth: "40rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: 2
+        }}
+      >
         {displayed.map(({ item, matchIndices }) => (
           <li key={item.slug}>
             {renderItem({
diff --git a/src/components/LibraryHomeLink.tsx b/src/components/LibraryHomeLink.tsx
index 6c2242c9..95574d9a 100644
--- a/src/components/LibraryHomeLink.tsx
+++ b/src/components/LibraryHomeLink.tsx
@@ -9,7 +9,10 @@ import { useRouter } from "next/router";
  */
 export const FOCUS_PREFETCH_DEBOUNCE_MS = 300;
 
-export interface LibraryHomeLinkProps {
+export interface LibraryHomeLinkProps extends Omit<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  "href" | "title" | "onFocus" | "onBlur"
+> {
   slug: string;
   title?: string;
 }
@@ -33,7 +36,7 @@ export interface LibraryHomeLinkProps {
  */
 const LibraryHomeLink: React.FC<
   React.PropsWithChildren<LibraryHomeLinkProps>
-> = ({ slug, title, children }) => {
+> = ({ slug, title, children, ...rest }) => {
   const router = useRouter();
   const href = `/${slug}`;
   const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(
@@ -54,6 +57,7 @@ const LibraryHomeLink: React.FC<
 
   return (
     <Link
+      {...rest}
       href={href}
       prefetch={false}
       onFocus={prefetchOnFocus}
diff --git a/src/components/MultiLibraryHome.tsx b/src/components/MultiLibraryHome.tsx
index 923cf60d..7b3d2dd1 100644
--- a/src/components/MultiLibraryHome.tsx
+++ b/src/components/MultiLibraryHome.tsx
@@ -7,6 +7,7 @@ import { useAppConfig } from "components/context/AppConfigContext";
 import theme from "theme/theme";
 import LibraryHomeLink from "./LibraryHomeLink";
 import LibraryFilterList from "components/LibraryFilterList";
+import LibraryCard from "components/LibraryCard";
 import { fetchLibraries } from "dataflow/fetchLibraries";
 import type { ClientLibrary, LibrariesResponse } from "pages/api/libraries";
 import { useTranslation } from "next-i18next/pages";
@@ -46,6 +47,7 @@ const MultiLibraryHome: React.FC = () => {
       return titleA.localeCompare(titleB);
     }
   );
+  const librariesBySlug = new Map(sorted.map(lib => [lib.slug, lib]));
 
   return (
     <ThemeUIProvider theme={theme}>
@@ -67,9 +69,21 @@ const MultiLibraryHome: React.FC = () => {
             label: lib.title || lib.slug
           }))}
           resultsListId="library-filter-results"
-          renderItem={({ slug, highlighted }) => (
-            <LibraryHomeLink slug={slug}>{highlighted}</LibraryHomeLink>
-          )}
+          renderItem={({ slug, highlighted }) => {
+            const library = librariesBySlug.get(slug);
+            return (
+              <LibraryCard
+                logoUrl={library?.logoUrl}
+                description={library?.description}
+              >
+                {actionProps => (
+                  <LibraryHomeLink slug={slug} {...actionProps}>
+                    {highlighted}
+                  </LibraryHomeLink>
+                )}
+              </LibraryCard>
+            );
+          }}
         />
       </Themed.root>
     </ThemeUIProvider>
diff --git a/src/components/WorkLibrarySelector.tsx b/src/components/WorkLibrarySelector.tsx
index bfc9805a..4161569b 100644
--- a/src/components/WorkLibrarySelector.tsx
+++ b/src/components/WorkLibrarySelector.tsx
@@ -4,6 +4,7 @@ import { useRouter } from "next/router";
 import type { ClientLibrary, LibrariesResponse } from "pages/api/libraries";
 import type { CatalogUrlResponse } from "pages/api/catalog-url";
 import LibraryFilterList from "components/LibraryFilterList";
+import LibraryCard from "components/LibraryCard";
 import { fetchLibraries } from "dataflow/fetchLibraries";
 import { buildWorkUrl } from "utils/workUrl";
 import { useTranslation } from "next-i18next/pages";
@@ -243,86 +244,92 @@ const LibrarySelectorCard: React.FC<LibrarySelectorCardProps> = ({
     }
   }
 
-  return (
-    <div sx={{ mb: 1 }}>
-      {/*
-       * A <button> rather than <a> is correct here: the destination URL is not
-       * known until the async /api/catalog-url call resolves, so there is no
-       * href to give a link. aria-busy signals the loading state to screen
-       * readers; the visual "Opening…" span (which also advertises the Escape
-       * cancel) is aria-hidden to avoid duplication.
-       * aria-disabled is used instead of disabled while a resolve is in
-       * flight so keyboard focus stays on the button (disabled would drop
-       * focus to the body); handleSelect ignores activations made during the
-       * resolve. Every card is marked disabled during a resolve because
-       * selection is blocked everywhere, not just on the resolving card.
-       * role="alert" on errors makes them announced without requiring focus;
-       * it wraps only the message text so the buttons in the error panel are
-       * not announced as live-region content.
-       */}
+  /*
+   * role="alert" makes errors announced without requiring focus. It wraps
+   * only the message text so the buttons in the error panel are not
+   * announced as live-region content.
+   */
+  const errorPanel = errorMessage && (
+    <div
+      sx={{
+        mt: 2,
+        p: 2,
+        border: "1px solid",
+        borderColor: "ui.error",
+        borderRadius: 2
+      }}
+    >
+      <span
+        role="alert"
+        sx={{ display: "block", color: "ui.error", fontSize: 1, mb: 1 }}
+      >
+        {errorMessage}
+      </span>
       <button
-        ref={buttonRef}
-        onClick={handleSelect}
-        aria-disabled={anyResolving}
-        aria-busy={isResolving}
-        sx={{
-          background: "none",
-          border: "none",
-          p: 0,
-          cursor: isResolving
-            ? "wait"
-            : anyResolving
-              ? "not-allowed"
-              : "pointer",
-          color: "inherit",
-          font: "inherit",
-          textAlign: "left",
-          textDecoration: "underline"
+        onClick={() => {
+          setErrorMessage(null);
+          onBackToSearch();
         }}
+        sx={{ mr: 2, cursor: "pointer" }}
       >
-        {highlighted}
-        {isResolving && (
-          <span aria-hidden="true" sx={{ ml: 2, fontSize: 0 }}>
-            {t("workLibrarySelector.opening", "Opening… (Esc to cancel)")}
-          </span>
-        )}
+        {t("workLibrarySelector.back", "Back to search")}
+      </button>
+      <button
+        onClick={() => {
+          setErrorMessage(null);
+          requestAnimationFrame(() => buttonRef.current?.focus());
+        }}
+        sx={{ cursor: "pointer" }}
+      >
+        {t("workLibrarySelector.ok", "OK")}
       </button>
-      {errorMessage && (
-        <div
+    </div>
+  );
+
+  // A <button> rather than <a> is correct here: the destination URL is not
+  // known until the async /api/catalog-url call resolves, so there is no href
+  // to give a link. aria-busy signals the loading state to screen readers;
+  // the visual "Opening…" span (which also advertises the Escape cancel) is
+  // aria-hidden to avoid duplication.
+  // aria-disabled is used instead of disabled while a resolve is in flight so
+  // keyboard focus stays on the button (disabled would drop focus to the
+  // body); handleSelect ignores activations made during the resolve. Every
+  // card is marked disabled during a resolve because selection is blocked
+  // everywhere, not just on the resolving card.
+  return (
+    <LibraryCard
+      logoUrl={library.logoUrl}
+      description={library.description}
+      footer={errorPanel}
+    >
+      {actionProps => (
+        <button
+          {...actionProps}
+          ref={buttonRef}
+          onClick={handleSelect}
+          aria-disabled={anyResolving}
+          aria-busy={isResolving}
           sx={{
-            mt: 1,
-            p: 2,
-            border: "1px solid",
-            borderColor: "ui.error",
-            borderRadius: 2
+            background: "none",
+            border: "none",
+            p: 0,
+            cursor: isResolving
+              ? "wait"
+              : anyResolving
+                ? "not-allowed"
+                : "pointer",
+            font: "inherit",
+            textAlign: "left"
           }}
         >
-          <span
-            role="alert"
-            sx={{ display: "block", color: "ui.error", fontSize: 1, mb: 1 }}
-          >
-            {errorMessage}
-          </span>
-          <button
-            onClick={() => {
-              setErrorMessage(null);
-              onBackToSearch();
-            }}
-            sx={{ mr: 2, cursor: "pointer" }}
-          >
-            {t("workLibrarySelector.back", "Back to search")}
-          </button>
-          <button
-            onClick={() => {
-              setErrorMessage(null);
-              requestAnimationFrame(() => buttonRef.current?.focus());
-            }}
-            sx={{ cursor: "pointer" }}
-          >
-            {t("workLibrarySelector.ok", "OK")}
-          </button>
-        </div>
+          {highlighted}
+          {isResolving && (
+            <span aria-hidden="true" sx={{ ml: 2, fontSize: 0 }}>
+              {t("workLibrarySelector.opening", "Opening… (Esc to cancel)")}
+            </span>
+          )}
+        </button>
       )}
-    </div>
+    </LibraryCard>
   );
 };
diff --git a/src/components/__tests__/LibraryCard.test.tsx b/src/components/__tests__/LibraryCard.test.tsx
new file mode 100644
index 00000000..ff5e58c9
--- /dev/null
+++ b/src/components/__tests__/LibraryCard.test.tsx
@@ -0,0 +1,58 @@
+import * as React from "react";
+import { fireEvent, render, screen } from "test-utils";
+import LibraryCard from "components/LibraryCard";
+
+function renderCard(props: Partial<React.ComponentProps<typeof LibraryCard>>) {
+  return render(
+    <LibraryCard {...props}>
+      {actionProps => (
+        <a href="https://example.com/abc" {...actionProps}>
+          ABC Library
+        </a>
+      )}
+    </LibraryCard>
+  );
+}
+
+test("renders logo image without alternative text when logoUrl is given", () => {
+  renderCard({ logoUrl: "https://example.com/logo.png" });
+  const img = screen.getByRole("presentation");
+  expect(img).toHaveAttribute("src", "https://example.com/logo.png");
+  expect(img).toHaveAttribute("alt", "");
+});
+
+test("renders the default logo hidden from assistive tech when there is no logo", () => {
+  renderCard({});
+  expect(screen.getByTestId("default-library-logo")).toHaveAttribute(
+    "aria-hidden",
+    "true"
+  );
+  expect(screen.queryByRole("presentation")).toBeNull();
+});
+
+test("falls back to the default logo when the logo fails to load", () => {
+  renderCard({ logoUrl: "https://example.com/missing.png" });
+  expect(screen.queryByTestId("default-library-logo")).toBeNull();
+  fireEvent.error(screen.getByRole("presentation"));
+  expect(screen.queryByRole("presentation")).toBeNull();
+  expect(screen.getByTestId("default-library-logo")).toBeInTheDocument();
+});
+
+test("describes the action with the description", () => {
+  renderCard({ description: "Serving Anytown." });
+  expect(
+    screen.getByRole("link", { name: "ABC Library" })
+  ).toHaveAccessibleDescription("Serving Anytown.");
+});
+
+test("adds no description reference when there is no description", () => {
+  renderCard({});
+  expect(screen.getByRole("link", { name: "ABC Library" })).not.toHaveAttribute(
+    "aria-describedby"
+  );
+});
+
+test("renders the footer", () => {
+  renderCard({ footer: <button>OK</button> });
+  expect(screen.getByRole("button", { name: "OK" })).toBeInTheDocument();
+});
diff --git a/src/components/__tests__/MultiLibraryHome.test.tsx b/src/components/__tests__/MultiLibraryHome.test.tsx
index 61f05d1a..df6b700a 100644
--- a/src/components/__tests__/MultiLibraryHome.test.tsx
+++ b/src/components/__tests__/MultiLibraryHome.test.tsx
@@ -42,6 +42,25 @@ describe("MultiLibraryHome", () => {
     expect(links[2]).toHaveTextContent("Zebra Library");
   });
 
+  it("passes each library's logo and description to its card", () => {
+    mockLibraries([
+      {
+        ...lib("alpha", "Alpha Library"),
+        logoUrl: "https://example.com/alpha/logo.png",
+        description: "Serving Alphaville."
+      }
+    ]);
+    render(<MultiLibraryHome />);
+
+    expect(screen.getByRole("presentation")).toHaveAttribute(
+      "src",
+      "https://example.com/alpha/logo.png"
+    );
+    expect(
+      screen.getByRole("link", { name: "Alpha Library" })
+    ).toHaveAccessibleDescription("Serving Alphaville.");
+  });
+
   it("displays libraries sorted by slug when no title is provided", () => {
     mockLibraries([lib("zebra"), lib("alpha"), lib("middle")]);
 
diff --git a/src/components/__tests__/WorkLibrarySelector.test.tsx b/src/components/__tests__/WorkLibrarySelector.test.tsx
index 1a097ef1..78bece09 100644
--- a/src/components/__tests__/WorkLibrarySelector.test.tsx
+++ b/src/components/__tests__/WorkLibrarySelector.test.tsx
@@ -96,6 +96,25 @@ describe("WorkLibrarySelector", () => {
     ).toBeInTheDocument();
   });
 
+  it("passes each library's logo and description to its card", () => {
+    mockLibraries([
+      {
+        ...lib("alpha", "Alpha Library"),
+        logoUrl: "https://example.com/alpha/logo.png",
+        description: "Serving Alphaville."
+      }
+    ]);
+    render(<WorkLibrarySelector workId="work-1" />);
+
+    expect(screen.getByRole("presentation")).toHaveAttribute(
+      "src",
+      "https://example.com/alpha/logo.png"
+    );
+    expect(
+      screen.getByRole("button", { name: "Alpha Library" })
+    ).toHaveAccessibleDescription("Serving Alphaville.");
+  });
+
   it("sorts libraries by title", () => {
     mockLibraries([
       lib("zebra", "Zebra Library"),
diff --git a/src/theme/theme.ts b/src/theme/theme.ts
index 320860a0..fd8473a0 100644
--- a/src/theme/theme.ts
+++ b/src/theme/theme.ts
@@ -31,7 +31,9 @@ const zIndices = {
 
 const shadows = {
   modal: "0px 2px 7px 3px rgba(0,0,0,0.3)",
-  focus: "0 0 0 0.2em rgba(0, 109, 255, 0.4)"
+  focus: "0 0 0 0.2em rgba(0, 109, 255, 0.4)",
+  card: "0 1px 2px rgba(0, 0, 0, 0.08)",
+  cardHover: "0 4px 12px rgba(0, 0, 0, 0.15)"
 };
 
 const theme = {