v0.9.4defuss-shadcn
Theme

defuss-shadcn / Website / Company / case-study

Built with: CSS

Case StudyBLK

Describes a project's problem, approach, and documented outcome - a header with the client, results as figures, the story in sections and a pull quote. Part of the Company blocks.

On this page (2)
Component Skill — components/case-study/component-skill.md

Native basis

An <article>: a header (client, industry, title, a cover picture), a results band (<dl>), then Challenge / Approach / Results sections - the approach as an <ol> - and a <blockquote> with its source.

Built from

Badge, Avatar.

Web Platform APIs

<article><dl><blockquote>CSS countersContainer queries

Classes

.mk-case-study.mk-case-study-head.mk-case-study-client.mk-case-study-title.mk-case-study-cover.mk-case-study-results.mk-case-study-layout.mk-case-study-body.mk-case-study-steps.mk-case-study-quote.mk-case-study-facts

Data attributes

None.

§Default

Client and title over a 21:9 cover, a results band (<dl>), then Challenge / Approach (an <ol> with counters) / Results with a pull quote - and a facts column that sticks from 52rem.

§CSS view file

/* -- Case Study (website · Company) ---------------------------------------
   Describes a project's problem, approach, and documented outcome - a header with the client, results as figures, the story in sections and a pull quote. */
@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-case-study, .mk-case-study *, .mk-case-study ::before, .mk-case-study ::after) { box-sizing: border-box; }
  .mk-case-study { container: mk-case-study / inline-size; display: grid; gap: 2.5rem; width: 100%; }
  .mk-case-study-head { display: grid; gap: 1rem; }
  .mk-case-study-client { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; color: var(--muted-foreground); font-size: 0.875rem;
    & strong { color: var(--foreground); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.03em; }
  }
  .mk-case-study-title { margin: 0; max-width: 48rem; font-size: clamp(1.75rem, 4.5cqi, 3rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
  .mk-case-study-cover { margin: 0; overflow: hidden; border-radius: var(--radius-xl); background: var(--muted);
    & img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
  }
  .mk-case-study-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: 1px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--border);
    & div { display: flex; flex-direction: column-reverse; gap: 0.25rem; padding: 1.5rem; background: var(--card); }
    & dd { margin: 0; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
    & dt { color: var(--muted-foreground); font-size: 0.875rem; }
  }
  .mk-case-study-layout { display: grid; gap: 2.5rem; }
  .mk-case-study-body {
    display: grid;
    gap: 2.25rem;
    min-width: 0;
    & section { display: grid; gap: 0.75rem; }
    & h2 { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -0.015em; }
    & p { margin: 0; color: var(--muted-foreground); line-height: 1.75; text-wrap: pretty; }
  }
  .mk-case-study-steps {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: mk-case-step;
    & li { counter-increment: mk-case-step; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.25rem 0.75rem; }
    & li::before { content: counter(mk-case-step); grid-row: span 2; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--muted); font-size: 0.875rem; font-weight: 700; }
    & strong { font-weight: 600; }
    & span { color: var(--muted-foreground); }
  }
  .mk-case-study-quote {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 2rem;
    border-radius: var(--radius-xl);
    background: var(--muted);
    & blockquote { margin: 0; font-family: var(--font-serif); font-size: 1.375rem; line-height: 1.45; text-wrap: pretty; }
    & figcaption { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; }
    & figcaption span { color: var(--muted-foreground); }
  }
  .mk-case-study-facts {
    display: grid;
    gap: 1rem;
    align-self: start;
    margin: 0;
    padding: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--card);
    color: var(--card-foreground);
    & div { display: grid; gap: 0.125rem; }
    & dt { color: var(--muted-foreground); font-size: 0.8125rem; }
    & dd { margin: 0; font-weight: 500; }
  }
  @container mk-case-study (min-width: 52rem) {
    .mk-case-study-layout { grid-template-columns: minmax(0, 1fr) 16rem; gap: 4rem; }
    .mk-case-study-facts { position: sticky; top: 1.5rem; }
  }
  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-case-study-results, .mk-case-study-facts { border-color: CanvasText; }
  }
}

Comments, ideas or improvements? Edit this page's source on GitHub