Packages
moon
2.78.2
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon_web/components/facing/card_article.ex
defmodule MoonWeb.Components.Facing.CardArticle do
@moduledoc false
use MoonWeb, :stateless_component
prop(variant, :string, values: ["default", "tall", "wide"], default: "default")
prop(href, :string)
slot(title)
slot(section)
slot(author)
def render(assigns) do
~F"""
<li>
<a target="_blank" href={@href}>
<div class={
"group relative w-72 h-96 flex flex-col justify-end p-6 bg-gohan rounded-moon-s-lg",
get_class(@variant)
}>
<p class="list-item absolute top-10 ltr:left-10 rtl:right-10 transform -rotate-90 origin-bottom-left text-moon-16 font-semibold">
<#slot {@section} />
</p>
<p
:if={@author}
class="absolute top-0 ltr:right-6 rtl:left-6 transform -rotate-90 origin-bottom-right text-moon-16 font-semibold"
>
<#slot {@author} />
</p>
<p class="text-moon-24 font-semibold">
<#slot {@title} />
</p>
</div>
</a>
</li>
"""
end
defp get_class(variant) do
case variant do
"tall" -> "md:w-72 md:h-[28rem] md:pe-9"
"wide" -> "md:w-[28rem] md:h-72 md:pe-12"
_ -> "md:w-96 md:h-72 md:pe-12"
end
end
end