[Styling Module] Profile Card

[dpeter99]

Module post template

Profile Card

Version: 0.1
Creator: dpeter99

Important

Supported cards:

• Button

Makes the card into a round profile with subbuttons as badges
This is a work in progress, I couldn't figure out how to make the element properly fit the available space while also keeping the correct aspect ratio. If someone knows hoe to do it please feel free to add to this.

I would also be interested in integrating with other modules for the badges maybe?

---

🧩 Get this Module

To use this module, simply copy and paste the following configuration into your /www/bubble/bubble-modules.yaml file.

profile_card:
    name: "Profile Card"
    version: "0.1"
    creator: "dpeter99"
    link: "https://github.com/Clooos/Bubble-Card/discussions/XXXX"

    supported:
        - button

    description: |
        Makes the card into a round profile with subbuttons as badges
        <br><br>
        <code-block><pre>
        profile_card: 
            # Your configuration here
        </pre></code-block>

    code: |
        *{
          box-sizing: border-box;
        }
        .card-content{
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .large .bubble-container{
          height: auto;
        }
        .bubble-container{
          background: none;
          --bubble-button-icon-background-color: #555555;
          border-radius: 0px !important;
        
          aspect-ratio: 1/1;
          width: 100%;
          height: auto;
          max-width: 100%;
          max-height: 100%;
        }
        .large .bubble-icon-container {
          grid-column-start: 1;
          grid-column-end: span 2;
          grid-row-start: 1;
          grid-row-end: span 2;
        
          height: 100%;
          width: 100%;
          --mdc-icon-size: 100%;
          
          margin: 0px;
        }
        .bubble-entity-picture{
          background-size: 80%;
          background-repeat: no-repeat;
        }
        .bubble-wrapper{
          display: grid;
          grid-template-areas:
            'a b'
            'c d'
          ;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 1fr 1fr;
          justify-items: center;
        
          aspect-ratio: 1/1;
        
          max-height: 100%;
          
        }
        .bubble-sub-button-container{
          display: contents
        }
        .bubble-sub-button{
          height: auto;
          aspect-ratio: 1 / 1;
          padding: 2px;
          min-width: 0px;
        }
        .bubble-sub-button-3{
          grid-area: a;
          align-self: start;
          justify-self: start;
        }
        .bubble-sub-button-2{
          grid-area: b;
          align-self: start;
          justify-self: end;
        }
        .bubble-sub-button-1{
          grid-area: c;
          align-self: end;
          justify-self: start;
        }
        .bubble-sub-button-4{
          grid-area: d;
            align-self: end;
          justify-self: end;
        }
        

---

Screenshot:

Important: The first screenshot here will be used on the Module Store, so please provide one.

The screenshot uses the following card:

type: custom:layout-card
layout_type: custom:grid-layout
cards:
  - type: custom:mushroom-title-card
    title: Hello, {{ user }} !
    subtitle: "11111"
    title_tap_action:
      action: none
    subtitle_tap_action:
      action: none
    grid_options:
      columns: 6
      rows: 2
  - type: custom:bubble-card
    card_type: button
    modules:
      - default
      - profile_card
    button_type: state
    entity: person.dpeter99
    card_layout: large
    icon: ""
    grid_options:
      columns: 2
      rows: 2
    sub_button:
      - entity: sensor.dpeter99_icon
        show_state: false
        show_background: true
        show_attribute: false
        show_icon: true
        attribute: device_trackers
    show_name: false
    show_state: false
    scrolling_effect: false
    styles: ""
    show_icon: true
    show_attribute: false
  - type: custom:bubble-card
    card_type: button
    modules:
      - default
      - profile_card
    button_type: state
    entity: person.dpeter99
    card_layout: large
    icon: ""
    grid_options:
      columns: 2
      rows: 2
    sub_button:
      - entity: sensor.dpeter99_icon
        show_state: false
        show_background: true
        show_attribute: false
        show_icon: true
        attribute: device_trackers
    show_name: false
    show_state: false
    scrolling_effect: false
    styles: ""
    show_icon: true
    show_attribute: false
layout:
  grid-template-columns: 60% 1fr 1fr

Before posting your module

• I've replaced all lines starting with ->
• I've updated the unsupported cards above the description and under the unsupported property
• I've added a screenshot
• I've chosen a unique your_module_key
• I really enjoyed working on this module ❤️