Avatar

Description

Avatar component is a visual representation of an entity, such as a user or an organization.

PRO

This component is part of our professional component suite. See the installation instructions below for more on how to use it.

Arguments

Name	Default	Type	Description
`src`		`String`	The source url of the avatar image.
`alt`		`String`	Passed through to alt on img tag.
`shape`	`circle`	`String`	Shape of the avatar. Options: `circle`, `rounded`, `square`
`size`	`32`	`Integer`	The size of the component.
`color`	`primary`	`String`	Background color. Options: `primary`, `secondary`, `light`, `dark`
`href`		`String`	The URL to link to. If used, component will be wrapped by an <a> tag.
`html_attributes`	`{}`	`Hash`	Any attributes for the used html wrapper tag

Examples

Default

<div class="d-flex gap-4 flex-wrap">
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/1.jpg", size: 32) %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/2.jpg", size: 40) %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/3.jpg", size: 48) %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/4.jpg", size: 56) %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/5.jpg", size: 64) %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/6.jpg", size: 72) %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/7.jpg", size: 80) %>
</div>

<div class="d-flex gap-4 flex-wrap">
  <div class="position-relative d-inline-block bg-primary rounded-circle" style="width: 32px; height: 32px; box-sizing: content-box;">
    <img alt="" class="rounded-circle" src="https://railsbootui.com/assets/public/avatar/1-0e38f189533d5684d22d51f8343519b16e4ba323454de5a3b9e8a50fe4be1ef2.jpg" width="32" height="32" />
  </div>
  <div class="position-relative d-inline-block bg-primary rounded-circle" style="width: 40px; height: 40px; box-sizing: content-box;">
    <img alt="" class="rounded-circle" src="https://railsbootui.com/assets/public/avatar/2-418080169b8fc440a2f1f5222a5b72eddbdf1a750c0f3fb4ddf01bf0b1a82210.jpg" width="40" height="40" />
  </div>
  <div class="position-relative d-inline-block bg-primary rounded-circle" style="width: 48px; height: 48px; box-sizing: content-box;">
    <img alt="" class="rounded-circle" src="https://railsbootui.com/assets/public/avatar/3-c7d1dc546cf5030d37d03587546e5e9fde59fd946325d77565b995d49e24506b.jpg" width="48" height="48" />
  </div>
  <div class="position-relative d-inline-block bg-primary rounded-circle" style="width: 56px; height: 56px; box-sizing: content-box;">
    <img alt="" class="rounded-circle" src="https://railsbootui.com/assets/public/avatar/4-d9b2768223571ee0bfba3a286c675eea05059b188b818c01b0f6f615fe7d01bb.jpg" width="56" height="56" />
  </div>
  <div class="position-relative d-inline-block bg-primary rounded-circle" style="width: 64px; height: 64px; box-sizing: content-box;">
    <img alt="" class="rounded-circle" src="https://railsbootui.com/assets/public/avatar/5-aac558fbf9feeccf6daab3bb8a66ef2f8c0e98e23f05dc4f1be712f595b17fe4.jpg" width="64" height="64" />
  </div>
  <div class="position-relative d-inline-block bg-primary rounded-circle" style="width: 72px; height: 72px; box-sizing: content-box;">
    <img alt="" class="rounded-circle" src="https://railsbootui.com/assets/public/avatar/6-46483a313535c99f7ceaa5cde83fb58365c3388d5af26b8f1f8f540251561360.jpg" width="72" height="72" />
  </div>
  <div class="position-relative d-inline-block bg-primary rounded-circle" style="width: 80px; height: 80px; box-sizing: content-box;">
    <img alt="" class="rounded-circle" src="https://railsbootui.com/assets/public/avatar/7-34f7790807b33a4a46e500ea6d1eeb28f1288e11e1900507a2b44d99b66bc3a1.jpg" width="80" height="80" />
  </div>
</div>

Rounded

<div class="d-flex gap-4 flex-wrap">
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/1.jpg", shape: "rounded", size: 32) %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/2.jpg", shape: "rounded", size: 40) %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/3.jpg", shape: "rounded", size: 48) %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/4.jpg", shape: "rounded", size: 56) %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/5.jpg", shape: "rounded", size: 64) %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/6.jpg", shape: "rounded", size: 72) %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/7.jpg", shape: "rounded", size: 80) %>
</div>

<div class="d-flex gap-4 flex-wrap">
  <div class="position-relative d-inline-block bg-primary rounded-4" style="width: 32px; height: 32px; box-sizing: content-box;">
    <img alt="" class="rounded-4" src="https://railsbootui.com/assets/public/avatar/1-0e38f189533d5684d22d51f8343519b16e4ba323454de5a3b9e8a50fe4be1ef2.jpg" width="32" height="32" />
  </div>
  <div class="position-relative d-inline-block bg-primary rounded-4" style="width: 40px; height: 40px; box-sizing: content-box;">
    <img alt="" class="rounded-4" src="https://railsbootui.com/assets/public/avatar/2-418080169b8fc440a2f1f5222a5b72eddbdf1a750c0f3fb4ddf01bf0b1a82210.jpg" width="40" height="40" />
  </div>
  <div class="position-relative d-inline-block bg-primary rounded-4" style="width: 48px; height: 48px; box-sizing: content-box;">
    <img alt="" class="rounded-4" src="https://railsbootui.com/assets/public/avatar/3-c7d1dc546cf5030d37d03587546e5e9fde59fd946325d77565b995d49e24506b.jpg" width="48" height="48" />
  </div>
  <div class="position-relative d-inline-block bg-primary rounded-4" style="width: 56px; height: 56px; box-sizing: content-box;">
    <img alt="" class="rounded-4" src="https://railsbootui.com/assets/public/avatar/4-d9b2768223571ee0bfba3a286c675eea05059b188b818c01b0f6f615fe7d01bb.jpg" width="56" height="56" />
  </div>
  <div class="position-relative d-inline-block bg-primary rounded-4" style="width: 64px; height: 64px; box-sizing: content-box;">
    <img alt="" class="rounded-4" src="https://railsbootui.com/assets/public/avatar/5-aac558fbf9feeccf6daab3bb8a66ef2f8c0e98e23f05dc4f1be712f595b17fe4.jpg" width="64" height="64" />
  </div>
  <div class="position-relative d-inline-block bg-primary rounded-4" style="width: 72px; height: 72px; box-sizing: content-box;">
    <img alt="" class="rounded-4" src="https://railsbootui.com/assets/public/avatar/6-46483a313535c99f7ceaa5cde83fb58365c3388d5af26b8f1f8f540251561360.jpg" width="72" height="72" />
  </div>
  <div class="position-relative d-inline-block bg-primary rounded-4" style="width: 80px; height: 80px; box-sizing: content-box;">
    <img alt="" class="rounded-4" src="https://railsbootui.com/assets/public/avatar/7-34f7790807b33a4a46e500ea6d1eeb28f1288e11e1900507a2b44d99b66bc3a1.jpg" width="80" height="80" />
  </div>
</div>

Square

<div class="d-flex gap-4 flex-wrap">
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/1.jpg", shape: "square", size: 32) %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/2.jpg", shape: "square", size: 40) %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/3.jpg", shape: "square", size: 48) %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/4.jpg", shape: "square", size: 56) %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/5.jpg", shape: "square", size: 64) %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/6.jpg", shape: "square", size: 72) %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/7.jpg", shape: "square", size: 80) %>
</div>

<div class="d-flex gap-4 flex-wrap">
  <div class="position-relative d-inline-block bg-primary rounded-0" style="width: 32px; height: 32px; box-sizing: content-box;">
    <img alt="" class="rounded-0" src="https://railsbootui.com/assets/public/avatar/1-0e38f189533d5684d22d51f8343519b16e4ba323454de5a3b9e8a50fe4be1ef2.jpg" width="32" height="32" />
  </div>
  <div class="position-relative d-inline-block bg-primary rounded-0" style="width: 40px; height: 40px; box-sizing: content-box;">
    <img alt="" class="rounded-0" src="https://railsbootui.com/assets/public/avatar/2-418080169b8fc440a2f1f5222a5b72eddbdf1a750c0f3fb4ddf01bf0b1a82210.jpg" width="40" height="40" />
  </div>
  <div class="position-relative d-inline-block bg-primary rounded-0" style="width: 48px; height: 48px; box-sizing: content-box;">
    <img alt="" class="rounded-0" src="https://railsbootui.com/assets/public/avatar/3-c7d1dc546cf5030d37d03587546e5e9fde59fd946325d77565b995d49e24506b.jpg" width="48" height="48" />
  </div>
  <div class="position-relative d-inline-block bg-primary rounded-0" style="width: 56px; height: 56px; box-sizing: content-box;">
    <img alt="" class="rounded-0" src="https://railsbootui.com/assets/public/avatar/4-d9b2768223571ee0bfba3a286c675eea05059b188b818c01b0f6f615fe7d01bb.jpg" width="56" height="56" />
  </div>
  <div class="position-relative d-inline-block bg-primary rounded-0" style="width: 64px; height: 64px; box-sizing: content-box;">
    <img alt="" class="rounded-0" src="https://railsbootui.com/assets/public/avatar/5-aac558fbf9feeccf6daab3bb8a66ef2f8c0e98e23f05dc4f1be712f595b17fe4.jpg" width="64" height="64" />
  </div>
  <div class="position-relative d-inline-block bg-primary rounded-0" style="width: 72px; height: 72px; box-sizing: content-box;">
    <img alt="" class="rounded-0" src="https://railsbootui.com/assets/public/avatar/6-46483a313535c99f7ceaa5cde83fb58365c3388d5af26b8f1f8f540251561360.jpg" width="72" height="72" />
  </div>
  <div class="position-relative d-inline-block bg-primary rounded-0" style="width: 80px; height: 80px; box-sizing: content-box;">
    <img alt="" class="rounded-0" src="https://railsbootui.com/assets/public/avatar/7-34f7790807b33a4a46e500ea6d1eeb28f1288e11e1900507a2b44d99b66bc3a1.jpg" width="80" height="80" />
  </div>
</div>

Letter

<div class="d-flex gap-4 flex-wrap">
  <%= render Railsboot::AvatarComponent.new(letter: "A", color: "primary", size: 80) %>
  <%= render Railsboot::AvatarComponent.new(letter: "W", color: "secondary", size: 80) %>
  <%= render Railsboot::AvatarComponent.new(letter: "BR", color: "dark", size: 80) %>
  <%= render Railsboot::AvatarComponent.new(letter: "MUI", color: "light", size: 80) %>
</div>

<div class="d-flex gap-4 flex-wrap">
  <div class="position-relative d-inline-block bg-primary rounded-circle" style="width: 80px; height: 80px; box-sizing: content-box;">
    <img alt="" class="rounded-circle" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgYWxpZ25tZW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSI0MCIgZHk9Ii4xZW0iIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIGZpbGw9IndoaXRlIj4KICAgIEEKICA8L3RleHQ+Cjwvc3ZnPgo=" width="80" height="80" />
  </div>
  <div class="position-relative d-inline-block bg-secondary rounded-circle" style="width: 80px; height: 80px; box-sizing: content-box;">
    <img alt="" class="rounded-circle" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgYWxpZ25tZW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSI0MCIgZHk9Ii4xZW0iIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIGZpbGw9IndoaXRlIj4KICAgIFcKICA8L3RleHQ+Cjwvc3ZnPgo=" width="80" height="80" />
  </div>
  <div class="position-relative d-inline-block bg-dark rounded-circle" style="width: 80px; height: 80px; box-sizing: content-box;">
    <img alt="" class="rounded-circle" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgYWxpZ25tZW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSI0MCIgZHk9Ii4xZW0iIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIGZpbGw9IndoaXRlIj4KICAgIEJSCiAgPC90ZXh0Pgo8L3N2Zz4K" width="80" height="80" />
  </div>
  <div class="position-relative d-inline-block bg-light rounded-circle" style="width: 80px; height: 80px; box-sizing: content-box;">
    <img alt="" class="rounded-circle" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgYWxpZ25tZW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSI0MCIgZHk9Ii4xZW0iIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIGZpbGw9ImJsYWNrIj4KICAgIE1VSQogIDwvdGV4dD4KPC9zdmc+Cg==" width="80" height="80" />
  </div>
</div>

Link

<div class="d-flex gap-4 flex-wrap">
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/1.jpg", size: 32, href: "/") %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/2.jpg", shape: "rounded", size: 40, href: "/") %>
  <%= render Railsboot::AvatarComponent.new(src: "public/avatar/3.jpg", shape: "square", size: 48, href: "/") %>
  <%= render Railsboot::AvatarComponent.new(letter: "A", color: "primary", size: 48, href: "/") %>
</div>

<div class="d-flex gap-4 flex-wrap">
  <a class="position-relative d-inline-block bg-primary rounded-circle" style="width: 32px; height: 32px; box-sizing: content-box;" href="/">
    <img alt="" class="rounded-circle" src="https://railsbootui.com/assets/public/avatar/1-0e38f189533d5684d22d51f8343519b16e4ba323454de5a3b9e8a50fe4be1ef2.jpg" width="32" height="32" />
  </a>
  <a class="position-relative d-inline-block bg-primary rounded-4" style="width: 40px; height: 40px; box-sizing: content-box;" href="/">
    <img alt="" class="rounded-4" src="https://railsbootui.com/assets/public/avatar/2-418080169b8fc440a2f1f5222a5b72eddbdf1a750c0f3fb4ddf01bf0b1a82210.jpg" width="40" height="40" />
  </a>
  <a class="position-relative d-inline-block bg-primary rounded-0" style="width: 48px; height: 48px; box-sizing: content-box;" href="/">
    <img alt="" class="rounded-0" src="https://railsbootui.com/assets/public/avatar/3-c7d1dc546cf5030d37d03587546e5e9fde59fd946325d77565b995d49e24506b.jpg" width="48" height="48" />
  </a>
  <a class="position-relative d-inline-block bg-primary rounded-circle" style="width: 48px; height: 48px; box-sizing: content-box;" href="/">
    <img alt="" class="rounded-circle" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgYWxpZ25tZW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSI0MCIgZHk9Ii4xZW0iIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIGZpbGw9IndoaXRlIj4KICAgIEEKICA8L3RleHQ+Cjwvc3ZnPgo=" width="48" height="48" />
  </a>
</div>

Installation

Simply download this component with all its related files and assets. Unpackage the downloaded ZIP-file, copy all relevant files into your app and adapt the things you need. The ZIP-folder contains:

A parent component class (app/components/railsboot/component.rb) of which all components inherit from.
A base component class (app/components/railsboot/base_component.rb) which is used for rendering internally.
The desired component itself (app/components/railsboot/avatar_component.rb).
A view template (app/components/railsboot/avatar_component.html.erb) for the component unless it's rendered inline.
Any other dependent components such as Slots (just if the component needs those)
Any dependent assets (JS-Files, CSS-Files) (just if the component needs those)
A test file for the components (test/components/railsboot/avatar_component_test.rb) including potential slot or dependency tests.

For more information please refer to the installation section.

Download

Download the component and its related files (e.g. templates, assets, slots etc.), unpackage the zip file and adapt the things you need.

Get access You need to purchase a professional license to download this component.

Alert Avatar Group