Phoenix UI

Github Repo

Getting Started
Installation: Tailwind CLI

Card

Cards contain content and actions about a single subject.

Examples

Below you can view various demos with example markup.

Basic Card

The alert component comes with three variants: filled, outlined, and standard (default).

Show source

Copy source


    
    <.card>
      <.card_content>
        <.typography color="slate" margin={false} extend_class="mb-6">
          Word of the Day
        </.typography>
        <.typography variant="h2" element="div" margin={false}>
          be•nev•o•lent
        </.typography>
        <.typography color="slate">
          adjective
        </.typography>
        <.typography variant="p" margin={false}>
          well meaning and kindly.
          <br />
          "a benevolent smile"
        </.typography>
      </.card_content>
      <.card_action>
        <.button variant="text" size="sm">Learn More</.button>
      </.card_action>
    </.card>

Word of the Day

be•nev•o•lent

adjective

well meaning and kindly.
"a benevolent smile"

Outlined Card

The alert component comes with three variants: filled, outlined, and standard (default).

Show source

Copy source


    
    <.card variant="outlined">
      <.card_content>
        <.typography color="slate" margin={false} extend_class="mb-6">
          Word of the Day
        </.typography>
        <.typography variant="h2" element="div" margin={false}>
          be•nev•o•lent
        </.typography>
        <.typography color="slate">
          adjective
        </.typography>
        <.typography variant="p" margin={false}>
          well meaning and kindly.
          <br />
          "a benevolent smile"
        </.typography>
      </.card_content>
      <.card_action>
        <.button variant="text" size="sm">Learn More</.button>
      </.card_action>
    </.card>

Word of the Day

be•nev•o•lent

adjective

well meaning and kindly.
"a benevolent smile"

Media

The alert component comes with three variants: filled, outlined, and standard (default).

Show source

Copy source


    
    <.card extend_class="max-w-sm">
      <.card_media
        alt="maui hawaii"
        src={@media_src}
        extend_class="h-56"
      />
      <.card_content>
        <.typography variant="h3" margin={false} align="left" extend_class="mb-4">
          Lorem ipsum
        </.typography>
        <.typography variant="p" margin={false} align="left">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </.typography>
      </.card_content>
      <.card_action extend_class="flex items-center">
        <.button color="blue" variant="text">
          Share
        </.button>
        <.button color="blue" variant="text">
          Learn More
        </.button>
      </.card_action>
    </.card>

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Header

The alert component comes with three variants: filled, outlined, and standard (default).

Show source

Copy source


    
    <.card extend_class="max-w-md">
      <.card_header>
        <:avatar src={@avatar_src}/>
        <:title>
          John Doe &nbsp;<b>@johndoe</b>
        </:title>
        <:subtitle>
          6 hours ago
        </:subtitle>
        <:action>
          <.button color="slate" variant="icon">
            <.heroicon name="dots-vertical" variant="outline"/>
          </.button>
        </:action>
      </.card_header>
      <.card_media
        alt="maui hawaii"
        src={@media_src}
        extend_class="h-56"
      />
      <.card_content>
        <.typography variant="p" margin={false} align="left">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </.typography>
      </.card_content>
      <.card_action extend_class="flex items-center">
        <.button color="slate" variant="icon">
          <.heroicon name="heart" variant="outline"/>
        </.button>
        <.button color="slate" variant="icon">
          <.heroicon name="chat" variant="outline"/>
        </.button>
        <div class="flex-1"></div>
        <.button color="slate" variant="icon">
          <.heroicon name="share" variant="outline"/>
        </.button>
      </.card_action>
    </.card>

John Doe @johndoe

6 hours ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

API

API documentation for the component. Learn about imports and available attributes.

Import

There are multiple ways to import components.

Copy source


    # PhoenixUI macro which imports all components
    use PhoenixUI
    # Or import component individually
    import PhoenixUI.Components.Card