Packages
moon
2.80.0
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/vision_card.ex
defmodule MoonWeb.Components.VisionCard do
@moduledoc false
use MoonWeb, :stateless_component
prop(header_image, :string)
prop(alt_header_image, :string)
prop(subtext, :string)
prop(inner_card_text, :string)
prop(name, :string)
prop(company, :string)
prop(user_image, :string)
prop(heading, :string)
prop(sub_heading, :string)
prop(supporting_text_items, :list)
def render(assigns) do
~F"""
<div class="flex flex-col 2xl:flex-row items-center gap-8 2xl:gap-18 3xl:gap-36">
<div class="theme-moon-dark flex flex-col items-center bg-goku rounded-moon-s-lg gap-14 p-2">
<div class="flex flex-col gap-14 max-w-lg items-end">
<img src={@header_image} alt={@alt_header_image}>
<p class="text-moon-16 max-w-md text-right text-trunks">
{@subtext}
</p>
</div>
<div class="flex flex-col rounded-moon-s-md py-6 px-8 gap-6 bg-gohan">
<p class="text-moon-32 text-goten">{@inner_card_text}</p>
<div class="flex items-center gap-2">
<img src={@user_image} alt="Testimonial">
<div class="flex flex-col">
<p class="text-moon-18 text-goten">{@name}</p>
<p class="text-moon-16 text-trunks">{@company}</p>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-8 max-w-sm">
<h3 class="text-moon-48 font-semibold">{@heading}</h3>
<p class="text-moon-20">{@sub_heading}</p>
<ul class="flex flex-col gap-4 text-moon-18 text-trunks list-disc ms-6">
{#for item <- @supporting_text_items}
<li key={item}>{item}</li>
{/for}
</ul>
</div>
</div>
"""
end
end