Questions tagged [joy-ui]

This tag should be used for questions regarding Joy UI: a library of beautifully designed React UI components. This open-source project is maintained by MUI.

Related tags

reactjs for questions that are React-related.
material-ui for questions that are Material UI related, another open-source UI library by MUI.
base-ui for questions that are Base UI related, another open-source UI library by MUI.
mui-x for questions that are MUI X related, another open-source UI library by MUI.

10 questions

votes

2 answers

How to remove outline in focus in Joy UI?

I'm having issues removing the outline from the Textarea component, but it does not work. This is what it looks like: I tried:

<div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a> 
                
                <a href="../../questions/tagged/joy-ui" class="post-tag grid--cell" title="show questions tagged 'joy-ui'" rel="tag">joy-ui</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Feb 28 '23 at 05:47">asked Feb 28 '23 at 05:47</time>
    <a href="../../users/17284968/reuven-ostrofsky" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/17284968.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Reuven Ostrofsky" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/17284968/reuven-ostrofsky" class="s-user-card--link">Reuven Ostrofsky</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">41</li>
            
            
            <li class="s-award-bling s-award-bling__bronze" title="1 bronze badges">1</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-72842220">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>4</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>2</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/72842220/can-i-use-joy-ui-with-material-ui-together" class="question-hyperlink">Can I use Joy UI with Material UI together?</a></h3>
        <div class="excerpt">I have a React application that uses Joy UI. I would like to use Material UI as well.
Can I use Material UI and Joy UI together in a React app? If so how?
</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a> 
                
                <a href="../../questions/tagged/material-ui" class="post-tag grid--cell" title="show questions tagged 'material-ui'" rel="tag">material-ui</a> 
                
                <a href="../../questions/tagged/joy-ui" class="post-tag grid--cell" title="show questions tagged 'joy-ui'" rel="tag">joy-ui</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jul 02 '22 at 20:27">asked Jul 02 '22 at 20:27</time>
    <a href="../../users/11137033/mahmoud-mousa-hamad" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/11137033.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Mahmoud Mousa Hamad" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/11137033/mahmoud-mousa-hamad" class="s-user-card--link">Mahmoud Mousa Hamad</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">538</li>
            
            <li class="s-award-bling s-award-bling__silver" title="8 silver badges">8</li>
            <li class="s-award-bling s-award-bling__bronze" title="21 bronze badges">21</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-75723076">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>2</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>2</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/75723076/mui-x-date-pickers-pro-not-working-with-joy-ui" class="question-hyperlink">MUI X Date Pickers Pro not working with Joy UI</a></h3>
        <div class="excerpt">MUI X Date Pickers Pro is currently not working with Joy UI. Undefined property errors appear.
Link to live example:
https://codesandbox.io/s/mui-joy-mui-x-date-pickers-pro-not-working-vmzlvy?file=/src/App.tsx
Example:
<CssVarsProvider>
 …</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/material-ui" class="post-tag grid--cell" title="show questions tagged 'material-ui'" rel="tag">material-ui</a> 
                
                <a href="../../questions/tagged/mui-x" class="post-tag grid--cell" title="show questions tagged 'mui-x'" rel="tag">mui-x</a> 
                
                <a href="../../questions/tagged/joy-ui" class="post-tag grid--cell" title="show questions tagged 'joy-ui'" rel="tag">joy-ui</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Mar 13 '23 at 14:16">asked Mar 13 '23 at 14:16</time>
    <a href="../../users/648580/judehall" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/648580.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="judehall" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/648580/judehall" class="s-user-card--link">judehall</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">884</li>
            
            <li class="s-award-bling s-award-bling__silver" title="12 silver badges">12</li>
            <li class="s-award-bling s-award-bling__bronze" title="27 bronze badges">27</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-75758396">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>1</strong></span>
                    <div class="viewcount">vote</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>2</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/75758396/translating-and-importing-joy-ui-dark-mode-to-clojurescript" class="question-hyperlink">Translating and importing Joy UI dark mode to ClojureScript</a></h3>
        <div class="excerpt">I am trying to use Joy UI and its dark mode https://mui.com/joy-ui/customization/dark-mode/ in my cljs project and am stuck with translating the part below to cljs code.
import * as React from 'react';
import { CssVarsProvider, extendTheme } from…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/clojurescript" class="post-tag grid--cell" title="show questions tagged 'clojurescript'" rel="tag">clojurescript</a> 
                
                <a href="../../questions/tagged/shadow-cljs" class="post-tag grid--cell" title="show questions tagged 'shadow-cljs'" rel="tag">shadow-cljs</a> 
                
                <a href="../../questions/tagged/joy-ui" class="post-tag grid--cell" title="show questions tagged 'joy-ui'" rel="tag">joy-ui</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Mar 16 '23 at 15:37">asked Mar 16 '23 at 15:37</time>
    <a href="../../users/9453199/darren-kim" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/9453199.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Darren Kim" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/9453199/darren-kim" class="s-user-card--link">Darren Kim</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">13</li>
            
            
            <li class="s-award-bling s-award-bling__bronze" title="2 bronze badges">2</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-76852358">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>0</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/76852358/how-do-i-remove-the-white-space-above-my-footer-control" class="question-hyperlink">How do I remove the white space above my footer control?</a></h3>
        <div class="excerpt">I am using Typescript, Nextjs, and Joy/Material UI. I have a strange white box on my page in dark mode.  Here's a screen shot of the problem:

Here is the code for the footer:
import BottomNavigation from "@mui/material/BottomNavigation";

export…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> 
                
                <a href="../../questions/tagged/typescript" class="post-tag grid--cell" title="show questions tagged 'typescript'" rel="tag">typescript</a> 
                
                <a href="../../questions/tagged/next.js" class="post-tag grid--cell" title="show questions tagged 'next.js'" rel="tag">next.js</a> 
                
                <a href="../../questions/tagged/material-ui" class="post-tag grid--cell" title="show questions tagged 'material-ui'" rel="tag">material-ui</a> 
                
                <a href="../../questions/tagged/joy-ui" class="post-tag grid--cell" title="show questions tagged 'joy-ui'" rel="tag">joy-ui</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Aug 07 '23 at 13:46">asked Aug 07 '23 at 13:46</time>
    <a href="../../users/2044/nick-hodges" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/2044.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Nick Hodges" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/2044/nick-hodges" class="s-user-card--link">Nick Hodges</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">16,902</li>
            <li class="s-award-bling s-award-bling__gold" title="11 gold badges">11</li>
            <li class="s-award-bling s-award-bling__silver" title="68 silver badges">68</li>
            <li class="s-award-bling s-award-bling__bronze" title="130 bronze badges">130</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-76613137">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>0</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/76613137/how-do-i-decrease-the-spacing-between-bullets-in-a-joyui-list" class="question-hyperlink">How do I decrease the spacing between bullets in a JoyUI List?</a></h3>
        <div class="excerpt">I have some lists on this page:
https://www.nickhodges.com/FavoriteStuff
but I want the spacing between the bullets to be smaller. I can't figure out the right way to do that using theming. I've tried this:
import { extendTheme } from…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/material-ui" class="post-tag grid--cell" title="show questions tagged 'material-ui'" rel="tag">material-ui</a> 
                
                <a href="../../questions/tagged/joy-ui" class="post-tag grid--cell" title="show questions tagged 'joy-ui'" rel="tag">joy-ui</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jul 04 '23 at 13:26">asked Jul 04 '23 at 13:26</time>
    <a href="../../users/2044/nick-hodges" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/2044.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Nick Hodges" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/2044/nick-hodges" class="s-user-card--link">Nick Hodges</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">16,902</li>
            <li class="s-award-bling s-award-bling__gold" title="11 gold badges">11</li>
            <li class="s-award-bling s-award-bling__silver" title="68 silver badges">68</li>
            <li class="s-award-bling s-award-bling__bronze" title="130 bronze badges">130</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-76394871">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/76394871/cubic-bezier-fixes-exiting-animation-but-breaks-entering-animation" class="question-hyperlink">Cubic-bezier fixes exiting animation but breaks entering animation</a></h3>
        <div class="excerpt">I'm trying to animate a collapsing list with React/Joy-UI
Here is my Transition element
     <Transition nodeRef={nodeRef} in={browseOpen} timeout={1000}>
      {(state: string) => (<List
        aria-labelledby="nav-list-browse"
        sx={{
     …</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a> 
                
                <a href="../../questions/tagged/typescript" class="post-tag grid--cell" title="show questions tagged 'typescript'" rel="tag">typescript</a> 
                
                <a href="../../questions/tagged/material-ui" class="post-tag grid--cell" title="show questions tagged 'material-ui'" rel="tag">material-ui</a> 
                
                <a href="../../questions/tagged/css-animations" class="post-tag grid--cell" title="show questions tagged 'css-animations'" rel="tag">css-animations</a> 
                
                <a href="../../questions/tagged/joy-ui" class="post-tag grid--cell" title="show questions tagged 'joy-ui'" rel="tag">joy-ui</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jun 03 '23 at 06:49">asked Jun 03 '23 at 06:49</time>
    <a href="../../users/3950167/chris" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/3950167.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Chris" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/3950167/chris" class="s-user-card--link">Chris</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">63</li>
            
            
            <li class="s-award-bling s-award-bling__bronze" title="5 bronze badges">5</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-76231868">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>1</strong> answer
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/76231868/paper-js-81-uncaught-typeerror-cannot-read-properties-of-undefined-reading-1-w" class="question-hyperlink">Paper.js:81 Uncaught TypeError: Cannot read properties of undefined (reading '1') when using Material UI and Joy UI</a></h3>
        <div class="excerpt">I am using react js with material UI together with JoyUI but I am getting a blank screen. My code is shown below:
import React from 'react';
import { CssVarsProvider } from '@mui/joy/styles';
import {Box, Card, CardContent, Container, Grid} from…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a> 
                
                <a href="../../questions/tagged/material-ui" class="post-tag grid--cell" title="show questions tagged 'material-ui'" rel="tag">material-ui</a> 
                
                <a href="../../questions/tagged/joy-ui" class="post-tag grid--cell" title="show questions tagged 'joy-ui'" rel="tag">joy-ui</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked May 11 '23 at 22:01">asked May 11 '23 at 22:01</time>
    <a href="../../users/9893991/kelvin-kahihu" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/9893991.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Kelvin Kahihu" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/9893991/kelvin-kahihu" class="s-user-card--link">Kelvin Kahihu</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">1</li>
            
            
            <li class="s-award-bling s-award-bling__bronze" title="2 bronze badges">2</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-75700362">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>0</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/75700362/joy-ui-select-onchange-handler-signature-throws-type-error-on-my-vscode-but-no" class="question-hyperlink">Joy UI Select onChange handler signature throws type error on my vscode but no error on codesandbox for same signature</a></h3>
        <div class="excerpt">I have a table of data ranging from 1 - 100 and a pagination component. Then I am using Joy UI Select component to change the number of rows displayed by page. The rows per page options are 8, 25, 50, 100. The number of rows per page is a react…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a> 
                
                <a href="../../questions/tagged/material-ui" class="post-tag grid--cell" title="show questions tagged 'material-ui'" rel="tag">material-ui</a> 
                
                <a href="../../questions/tagged/react-typescript" class="post-tag grid--cell" title="show questions tagged 'react-typescript'" rel="tag">react-typescript</a> 
                
                <a href="../../questions/tagged/joy-ui" class="post-tag grid--cell" title="show questions tagged 'joy-ui'" rel="tag">joy-ui</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Mar 10 '23 at 19:39">asked Mar 10 '23 at 19:39</time>
    <a href="../../users/14085311/moody2times" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/14085311.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="moody2times" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/14085311/moody2times" class="s-user-card--link">moody2times</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">1</li>
            
            
            <li class="s-award-bling s-award-bling__bronze" title="3 bronze badges">3</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-74201156">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>0</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>0</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/74201156/why-joy-ui-select-inside-of-a-material-ui-dialog-renders-the-drop-down-incorre" class="question-hyperlink">Why Joy UI Select inside of a Material UI Dialog renders the drop down incorrectly?</a></h3>
        <div class="excerpt">For the time being I have a need to mix Material UI and MUI Joy UI in the same project. I have a Joy UI Select component inside of a Material UI Dialog and I am having the problem that the dropdown list renders inside the dialog and it is cut by the…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/reactjs" class="post-tag grid--cell" title="show questions tagged 'reactjs'" rel="tag">reactjs</a> 
                
                <a href="../../questions/tagged/material-ui" class="post-tag grid--cell" title="show questions tagged 'material-ui'" rel="tag">material-ui</a> 
                
                <a href="../../questions/tagged/joy-ui" class="post-tag grid--cell" title="show questions tagged 'joy-ui'" rel="tag">joy-ui</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Oct 25 '22 at 23:28">asked Oct 25 '22 at 23:28</time>
    <a href="../../users/927737/marquez" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/927737.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Marquez" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/927737/marquez" class="s-user-card--link">Marquez</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">5,891</li>
            <li class="s-award-bling s-award-bling__gold" title="3 gold badges">3</li>
            <li class="s-award-bling s-award-bling__silver" title="31 silver badges">31</li>
            <li class="s-award-bling s-award-bling__bronze" title="40 bronze badges">40</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>

</div>
        </div>

</div>
        </div>
        <script src="../../static/js/stack-icons.js"></script>
        <script src="../../static/js/fromnow.js"></script>
        
    </body>
</html>