User Rating

Inspect the full details and code of a selected snippet

<div class="uk-flex-1 uk-flex">
  <div class="uk-container uk-container-small uk-flex-1 uk-flex uk-flex-column uk-margin-medium-top uk-margin-medium-bottom">
    <div class="uk-flex-1 uk-flex uk-flex-column uk-flex-center">
      <div class="uk-width-1-1">
        <div class="uk-text-small uk-text-muted uk-text-uppercase uk-text-semibold uk-margin-small-bottom">User Rating</div>
        <div class="uk-card uk-card-default uk-box-shadow-remove uk-padding uk-border-rounded">
          
          <div class="uk-card uk-card-default uk-padding-remove uk-border-rounded">
          	<div class="uk-card-header uk-padding-small">
              <div class="uk-flex">
                <span class="uk-h4 uk-text-uppercase uk-margin-remove">User Rating</span>
                <div class="uk-margin-small-left">
                  <span class="fa fa-star checked"></span>
                  <span class="fa fa-star checked"></span>
                  <span class="fa fa-star checked"></span>
                  <span class="fa fa-star checked"></span>
                  <span class="fa fa-star"></span>                  
                </div>
              </div>
              <div class="uk-text-small uk-text-muted uk-text-semibold">4.1 average based on 254 reviews</div>
            </div>
            <div class="uk-card-body uk-padding-small">
             
              <div class="uk-rating-bars">
                <div class="uk-grid-small uk-flex-middle" uk-grid>
                  <div class="uk-width-1-6 uk-rating-bar-title">5 stars</div>
                  <div class="uk-width-expand">
                    <div class="uk-background-muted">
                      <div class="uk-background-success" style="width: 90%"></div>
                    </div>
                  </div>
                  <div class="uk-width-1-6 uk-text-muted uk-rating-bar-count">150 reviews</div>
                </div>
                <div class="uk-grid-small uk-flex-middle" uk-grid>
                  <div class="uk-width-1-6 uk-rating-bar-title">4 stars</div>
                  <div class="uk-width-expand">
                    <div class="uk-background-muted">
                      <div class="uk-background-primary" style="width: 60%"></div>
                    </div>
                  </div>
                  <div class="uk-width-1-6 uk-text-muted uk-rating-bar-count">63 reviews</div>
                </div>
                <div class="uk-grid-small uk-flex-middle" uk-grid>
                  <div class="uk-width-1-6 uk-rating-bar-title">3 stars</div>
                  <div class="uk-width-expand">
                    <div class="uk-background-muted">
                      <div class="uk-background-secondary" style="width: 50%"></div>
                    </div>
                  </div>
                  <div class="uk-width-1-6 uk-text-muted uk-rating-bar-count">20 reviews</div>
                </div>
                <div class="uk-grid-small uk-flex-middle" uk-grid>
                  <div class="uk-width-1-6 uk-rating-bar-title">2 stars</div>
                  <div class="uk-width-expand">
                    <div class="uk-background-muted">
                      <div class="uk-background-warning" style="width: 40%"></div>
                    </div>
                  </div>
                  <div class="uk-width-1-6 uk-text-muted uk-rating-bar-count">15 reviews</div>
                </div>
                <div class="uk-grid-small uk-flex-middle" uk-grid>
                  <div class="uk-width-1-6 uk-rating-bar-title">1 star</div>
                  <div class="uk-width-expand">
                    <div class="uk-background-muted">
                      <div class="uk-background-danger" style="width: 10%"></div>
                    </div>
                  </div>
                  <div class="uk-width-1-6 uk-text-muted uk-rating-bar-count">10 reviews</div>
                </div>
              </div>
              
            </div>
          </div>
          
        </div>
      </div>
      <div class="uk-text-mini uk-text-right">made by <b>Antonius</b></div>
    </div>
  </div>
</div>

Information

Detailed overview of a selected code snippet

antonius

27.03.2025, 16:21:15

28.03.2025, 11:16:07

uk-background, uk-border, uk-box, uk-card, uk-container, uk-flex, uk-grid, uk-h4, uk-margin, uk-padding, uk-rating, uk-text, uk-width

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!