# `LineaUI.Components.Mask`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/mask.ex#L1)

Crops its content to one of LineOne's mask shapes: squircle, reuleaux triangle, diamond,
hexagon, octagon, star or heart.

    <.mask shape="heart" src="/images/avatar.jpg" alt="Jane" class="size-36" />
    <.mask shape="hexagon" class="size-20 bg-primary">
      <span>JD</span>
    </.mask>

With `src` it renders the masked image itself; otherwise a block holding the inner content.

# `mask`

Renders a masked image (with `src`) or a masked block around the inner content. Size it
with `class`.

    <.mask shape="hexagon" src={@user.photo} alt={@user.name} class="size-20" />

## Attributes

* `shape` (`:string`) - Defaults to `"squircle"`. Must be one of `"squircle"`, `"reuleaux-triangle"`, `"diamond"`, `"hexagon"`, `"hexagon-2"`, `"octagon"`, `"star"`, `"star-2"`, or `"heart"`.
* `src` (`:string`) - Defaults to `nil`.
* `alt` (`:string`) - Defaults to `""`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block`

# `mask_class`

```elixir
@spec mask_class(String.t()) :: String.t()
```

The classes of a mask shape, for elements that wear the mask themselves.

# `mask_shapes`

```elixir
@spec mask_shapes() :: [String.t()]
```

The shape names `mask/1` takes.

---

*Consult [api-reference.md](api-reference.md) for complete listing*