Packages

pyraui

0.1.2
0.1.2 0.1.1 0.1.0

PyraUI is a Phoenix LiveView component library delivering production-ready, premium UI building blocks.

HexDocs

Current section

Files

Jump to
Readme
3 Versions
11 Dependencies
Dependants
Files
Activity
pyraui lib pyraui_web live docs card_docs.ex
Raw

lib/pyraui_web/live/docs/card_docs.ex 

defmodule PyrauiWeb.DocsLive.CardDocs do

  use PyrauiWeb, :html



  def render(assigns) do

    ~H"""

    <div class="space-y-16 py-12 text-slate-900">

      <header class="space-y-4">

        <span class="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-4 py-1 text-xs font-semibold uppercase tracking-[0.35em] text-slate-500">

          Card systems <span class="h-1 w-1 rounded-full bg-slate-400"></span> Galleries

        </span>

        <h1 class="text-4xl font-semibold tracking-tight text-slate-900 sm:text-5xl">

          Card

        </h1>

        <p class="max-w-3xl text-base leading-relaxed text-slate-600 sm:text-lg">

          The card component brings polished surfaces, gradients, and rich layout slots for marketing tiles, dashboards, and data summaries.

        </p>

      </header>



      <section class="space-y-12">

        <div class="space-y-3">

          <h2 class="text-2xl font-semibold text-slate-900">Hero tiles</h2>

          <p class="max-w-4xl text-sm text-slate-600">

            Blend gradients, media, badges, and footer actions with just a few slots. Hover states and tone gradients keep hero cards lively yet refined.

          </p>

        </div>



        <Pyraui.Components.Card.card tone={:sky} variant={:glass} hoverable class="w-full">

          <:badge>Featured</:badge>

          <:media>

            <img

              src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1200&q=80"

              alt="Team collaborating"

              class="h-60 w-full object-cover md:h-72"

            />

          </:media>

          <:header>

            <div class="space-y-2">

              <p class="text-xs uppercase tracking-[0.35em] text-white/70">Product launch</p>

              <h3 class="text-2xl font-semibold">Skyline Analytics</h3>

            </div>

          </:header>

          <p>

            Automate KPI synths, annotate trends, and broadcast live dashboards straight to investor workspaces with zero configuration.

          </p>

          <:footer>

            <div class="flex items-center gap-3">

              <span class="inline-flex items-center gap-1.5 rounded-full bg-white/15 px-3 py-1 text-xs font-semibold text-white/80">

                <PyrauiWeb.CoreComponents.icon name="hero-sparkles" class="h-4 w-4" /> AI insights

              </span>

              <span class="text-white/70">Usage · 12 teams</span>

            </div>

            <button class="rounded-full border border-white/40 px-4 py-1.5 text-xs font-semibold text-white hover:bg-white/10">

              Launch workspace

            </button>

          </:footer>

        </Pyraui.Components.Card.card>



        <pre class="overflow-x-auto rounded-xl bg-slate-900/95 p-6 text-sm leading-6 text-slate-100 shadow-[0_35px_90px_-60px_rgba(15,23,42,0.35)]">

    <code phx-no-curly-interpolation class="block whitespace-pre">

    &lt;.card tone={:sky} variant={:glass} hoverable&gt;

    &lt;:badge&gt;Featured&lt;/:badge&gt;

    &lt;:media&gt;

    &lt;img src="..." class="h-60 w-full object-cover md:h-72" /&gt;

    &lt;/:media&gt;

    &lt;:header&gt;

    &lt;h3 class="text-2xl font-semibold"&gt;Skyline Analytics&lt;/h3&gt;

    &lt;/:header&gt;

    Automate KPI synths and broadcast live dashboards.

    &lt;:footer&gt;

    &lt;span class="text-white/70"&gt;Usage · 12 teams&lt;/span&gt;

    &lt;button class="rounded-full border px-4 py-1.5"&gt;Launch workspace&lt;/button&gt;

    &lt;/:footer&gt;

    &lt;/.card&gt;

    </code>

        </pre>



        <Pyraui.Components.Card.card

          tone={:emerald}

          variant={:soft}

          hoverable

          shadow={:lg}

          class="w-full"

        >

          <:badge>New</:badge>

          <:header>

            <div class="space-y-2">

              <p class="text-xs uppercase tracking-[0.3em] text-emerald-500">Changelog</p>

              <h3 class="text-xl font-semibold text-slate-900">Collaboration cockpit</h3>

            </div>

          </:header>

          <ul class="space-y-2 text-sm leading-relaxed">

            <li class="flex items-start gap-2">

              <PyrauiWeb.CoreComponents.icon

                name="hero-check-circle"

                class="mt-0.5 h-4 w-4 text-emerald-500"

              /> Inline comment threads across every block.

            </li>

            <li class="flex items-start gap-2">

              <PyrauiWeb.CoreComponents.icon

                name="hero-check-circle"

                class="mt-0.5 h-4 w-4 text-emerald-500"

              /> Auto-summarised standups sent to Slack and Teams.

            </li>

            <li class="flex items-start gap-2">

              <PyrauiWeb.CoreComponents.icon

                name="hero-check-circle"

                class="mt-0.5 h-4 w-4 text-emerald-500"

              /> Figma, Linear, and GitHub presence indicators.

            </li>

          </ul>

          <:footer>

            <span class="text-slate-600">Rollout 2.4 · GA next week</span>

          </:footer>

        </Pyraui.Components.Card.card>



        <pre class="overflow-x-auto rounded-xl bg-slate-50 p-6 text-sm leading-6 text-slate-800 shadow-inner">

    <code phx-no-curly-interpolation class="block whitespace-pre">

    &lt;.card tone={:emerald} variant={:soft} hoverable shadow={:lg}&gt;

    &lt;:badge&gt;New&lt;/:badge&gt;

    &lt;:header&gt;

    &lt;h3 class="text-xl font-semibold"&gt;Collaboration cockpit&lt;/h3&gt;

    &lt;/:header&gt;

    &lt;ul class="space-y-2"&gt;

    &lt;li&gt;Inline comment threads across every block.&lt;/li&gt;

    ...

    &lt;/ul&gt;

    &lt;:footer&gt;

    &lt;span class="text-slate-600"&gt;Rollout 2.4 · GA next week&lt;/span&gt;

    &lt;/:footer&gt;

    &lt;/.card&gt;

    </code>

        </pre>



        <Pyraui.Components.Card.card

          tone={:violet}

          variant={:glass}

          hoverable

          padded={false}

          class="w-full"

        >

          <:media>

            <img

              src="https://images.unsplash.com/photo-1523475472560-d2df97ec485c?auto=format&fit=crop&w=1200&q=80"

              alt="Gradient campaign"

              class="h-56 w-full object-cover md:h-72"

            />

          </:media>

          <:header>

            <div class="space-y-2 px-6 pt-6">

              <p class="text-xs uppercase tracking-[0.3em] text-white/60">Campaign</p>

              <h4 class="text-xl font-semibold text-white">Nebula brand system</h4>

            </div>

          </:header>

          <div class="space-y-4 px-6 pb-6 text-white/80">

            <p>

              Nebula’s creative crew remixed PyraUI cards with tone gradients to balance vibrancy and readability across their hero surfaces.

            </p>

          </div>

        </Pyraui.Components.Card.card>

      </section>



      <section class="space-y-6">

        <div class="space-y-3">

          <h3 class="text-xl font-semibold text-slate-900">Variants &amp; tones</h3>

          <p class="text-sm text-slate-600">

            Mix visual styles—solid, soft, glass, and outline—with tones to match your brand palette.

          </p>

        </div>



        <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-4">

          <Pyraui.Components.Card.card tone={:neutral} variant={:solid} hoverable>

            <:header>

              <h4 class="text-lg font-semibold text-slate-900">Solid minimal</h4>

            </:header>

            <p>

              Classic white surface with subtle depth. Ideal for dashboards, tables, and stacked layouts.

            </p>

          </Pyraui.Components.Card.card>



          <Pyraui.Components.Card.card tone={:sky} variant={:soft} hoverable>

            <:header>

              <h4 class="text-lg font-semibold text-slate-900">Soft gradient</h4>

            </:header>

            <p>

              Gentle gradient wash and accent line keep marketing sections fresh without overpowering content.

            </p>

          </Pyraui.Components.Card.card>



          <Pyraui.Components.Card.card tone={:violet} variant={:glass} hoverable>

            <:header>

              <h4 class="text-lg font-semibold text-white">Glass surface</h4>

            </:header>

            <p>

              Frosted transparency with luminous edges—perfect for hero callouts on dark backdrops.

            </p>

          </Pyraui.Components.Card.card>



          <Pyraui.Components.Card.card tone={:rose} variant={:outline} hoverable shadow={:sm}>

            <:header>

              <h4 class="text-lg font-semibold text-slate-900">Outline</h4>

            </:header>

            <p>

              Lightweight border treatment for utility drawers, settings screens, or dense forms.

            </p>

          </Pyraui.Components.Card.card>

        </div>



        <pre class="overflow-x-auto rounded-xl bg-slate-50 p-6 text-sm leading-6 text-slate-800 shadow-inner">

    <code phx-no-curly-interpolation class="block whitespace-pre">

    &lt;.card tone={:violet} variant={:glass} hoverable shadow={:lg}&gt;...&lt;/.card&gt;

    &lt;.card tone={:rose} variant={:outline} padded={false}&gt;...&lt;/.card&gt;

    </code>

        </pre>

      </section>



      <section class="space-y-6">

        <div class="space-y-3">

          <h3 class="text-xl font-semibold text-slate-900">Layout patterns</h3>

          <p class="text-sm text-slate-600">

            Compose headers, action rows, media, and footers to suit marketing hero cards or product summaries.

          </p>

        </div>



        <div class="grid gap-6 lg:grid-cols-3">

          <Pyraui.Components.Card.card tone={:amber} variant={:soft} hoverable>

            <:header>

              <div>

                <p class="text-xs uppercase tracking-[0.3em] text-amber-600">Case study</p>

                <h4 class="text-xl font-semibold text-slate-900">Nimbus Payback</h4>

              </div>

            </:header>

            <p>

              Nimbus migrated payback workflows to PyraUI and shipped a new partner portal in three days. See how the team composed dashboards with live metrics.

            </p>

            <:footer>

              <a class="inline-flex items-center gap-2 text-amber-600 hover:text-amber-700" href="#">

                Read story <PyrauiWeb.CoreComponents.icon name="hero-arrow-right" class="h-4 w-4" />

              </a>

            </:footer>

          </Pyraui.Components.Card.card>



          <Pyraui.Components.Card.card tone={:emerald} variant={:solid} hoverable>

            <:header>

              <div class="flex items-center justify-between">

                <h4 class="text-xl font-semibold text-slate-900">Conversion snapshot</h4>

                <span class="rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700">

                  +18.4%

                </span>

              </div>

            </:header>

            <p>

              Weekly incremental uplift following the onboarding refresh. Most gains came from the global search surface and real-time templates.

            </p>

            <:footer>

              <div class="flex items-center gap-3 text-slate-600">

                <PyrauiWeb.CoreComponents.icon name="hero-calendar-days" class="h-4 w-4" />

                Last updated 2 hours ago

              </div>

            </:footer>

          </Pyraui.Components.Card.card>



          <Pyraui.Components.Card.card tone={:violet} variant={:glass} hoverable padded={false}>

            <:media>

              <img

                src="https://images.unsplash.com/photo-1523475472560-d2df97ec485c?auto=format&fit=crop&w=1200&q=80"

                alt="Gradient campaign"

                class="h-44 w-full object-cover"

              />

            </:media>

            <:header>

              <div class="space-y-2 px-6 pt-6">

                <p class="text-xs uppercase tracking-[0.3em] text-white/60">Campaign</p>

                <h4 class="text-xl font-semibold text-white">Nebula brand system</h4>

              </div>

            </:header>

            <div class="space-y-4 px-6 pb-6 text-white/80">

              <p>

                Nebula’s creative crew remixed PyraUI cards with tone gradients to balance vibrancy and readability across their hero surfaces.

              </p>

            </div>

          </Pyraui.Components.Card.card>

        </div>

      </section>



      <section class="space-y-6">

        <h3 class="text-xl font-semibold text-slate-900">Props</h3>

        <p class="max-w-2xl text-sm text-slate-600">

          Cards accept slots for media, badges, headers, footer actions, and support multiple surface variants with brand tones.

        </p>



        <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-[0_30px_80px_-60px_rgba(15,23,42,0.25)]">

          <table class="min-w-full divide-y divide-slate-100 text-sm text-slate-700">

            <thead class="bg-slate-50 text-xs uppercase tracking-[0.25em] text-slate-500">

              <tr>

                <th class="px-6 py-4 text-left">Prop</th>

                <th class="px-6 py-4 text-left">Type</th>

                <th class="px-6 py-4 text-left">Default</th>

                <th class="px-6 py-4 text-left">Description</th>

              </tr>

            </thead>

            <tbody class="divide-y divide-slate-100">

              <tr>

                <td class="px-6 py-4 font-medium text-slate-900">variant</td>

                <td class="px-6 py-4">:solid | :soft | :glass | :outline</td>

                <td class="px-6 py-4 text-sky-500">:solid</td>

                <td class="px-6 py-4">

                  Surface style and chroma treatment.

                </td>

              </tr>

              <tr>

                <td class="px-6 py-4 font-medium text-slate-900">tone</td>

                <td class="px-6 py-4">:neutral | :sky | :violet | :emerald | :amber | :rose</td>

                <td class="px-6 py-4 text-sky-500">:neutral</td>

                <td class="px-6 py-4">

                  Accent gradient for the top indicator and badges.

                </td>

              </tr>

              <tr>

                <td class="px-6 py-4 font-medium text-slate-900">shadow</td>

                <td class="px-6 py-4">:none | :sm | :md | :lg | :xl</td>

                <td class="px-6 py-4 text-sky-500">:md</td>

                <td class="px-6 py-4">

                  Depth intensity for the card surface.

                </td>

              </tr>

              <tr>

                <td class="px-6 py-4 font-medium text-slate-900">padded</td>

                <td class="px-6 py-4">boolean</td>

                <td class="px-6 py-4 text-sky-500">true</td>

                <td class="px-6 py-4">

                  Toggle internal padding when composing custom layouts.

                </td>

              </tr>

              <tr>

                <td class="px-6 py-4 font-medium text-slate-900">hoverable</td>

                <td class="px-6 py-4">boolean</td>

                <td class="px-6 py-4 text-sky-500">false</td>

                <td class="px-6 py-4">

                  Adds lift and shadow animation on hover.

                </td>

              </tr>

              <tr>

                <td class="px-6 py-4 font-medium text-slate-900">slots</td>

                <td class="px-6 py-4">

                  <code>header</code>, <code>media</code>, <code>badge</code>, <code>footer</code>,

                  <code>actions</code>

                </td>

                <td class="px-6 py-4 text-sky-500">—</td>

                <td class="px-6 py-4">

                  Compose hero content, imagery, CTA actions, and metadata.

                </td>

              </tr>

            </tbody>

          </table>

        </div>

      </section>

    </div>

    """

  end

end