Default :: Stat :: Midwest Component Library v0.24.0

<article data-controller="midwest-card" class="midwest-card midwest-stat">
  <div class="wrap">
    <section>
      <div class="stat-content">
        <div class="stat-value">1,284</div>
        <div class="stat-label">Total users</div>
      </div>
    </section>
  </div>
</article>

<%= render Midwest::StatComponent.new(value: '1,284', label: 'Total users') %>

Default

A compact KPI tile with a value and label.

No params configured.

Primary color

Complement color

Dark mode

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Stat/default

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."

Embed Code

what's this?

<lookbook-embed app="https://midwest.unabridged-staging.com/lookbook/" preview="Elements::StatComponentPreview" scenario="default"></lookbook-embed>

Embed URL

what's this?

https://midwest.unabridged-staging.com/lookbook/embed?props=%7B%22preview%22%3A%22Elements%3A%3AStatComponentPreview%22%2C%22scenario%22%3A%22default%22%7D

Lookbook v2.3.4

{ "version": "2.3.4", "env": "production", "config": { "project_name": "Midwest Component Library v0.24.0", "project_logo": null, "preview_collection_label": "Previews", "preview_nav_filter": true, "preview_paths": [ "test/components/previews", "/rails/demo/app/previews", "/rails/demo/app/previews" ], "preview_display_options": {}, "preview_controller": "PreviewController", "preview_template": "lookbook/previews/preview", "preview_inspector": { "main_panels": [ "preview", "output" ], "drawer_panels": [ "source", "notes", "params", "page_theme", "assets", "accessibility", "figma" ], "sidebar_panels": [ "previews", "pages" ] }, "preview_embeds": { "enabled": true, "policy": "SAMEORIGIN", "panels": false, "actions": [], "scenarios": [], "display_option_controls": true }, "preview_layout": null, "preview_disable_action_view_annotations": true, "preview_disable_action_view_partial_prefixes": true, "preview_type_default": "view_component", "preview_sort_scenarios": false, "preview_disable_error_handling": false, "page_collection_label": "Pages", "page_nav_filter": false, "page_controller": "Lookbook::PageController", "page_route": "pages", "page_paths": [ "test/components/docs", "/rails/demo/app/docs" ], "page_extensions": [ "html.*", "md.*" ], "page_options": {}, "markdown_options": { "tables": true, "fenced_code_blocks": true, "disable_indented_code_blocks": true, "strikethrough": true, "highlight": true, "with_toc_data": true, "lax_spacing": true }, "highlighter_options": { "theme": "github", "dark": false }, "component_paths": [ "app/views", "app/components", "/rails/app/components" ], "reload_on_change": false, "lazy_load_previews_and_pages": false, "live_updates": false, "listen_paths": [], "listen_extensions": [ "rb", "html.*" ], "autoload_previews": true, "ui_theme": "indigo", "ui_theme_overrides": {}, "ui_favicon": true, "log_level": 2, "log_use_rails_logger": true, "debug_menu": true, "links": { "docs": "https://v2.lookbook.build", "demo": "https://v2-demo.lookbook.build", "repo": "https://github.com/lookbook-hq/lookbook/tree/v2" }, "using_view_component": true, "show_stories": true, "preview_params_options_eval": true, "dependencies": { "actioncable": true, "listen": false, "view_component": true }, "panels": { "assets": { "label": "Assets", "hotkey": null, "disabled": false, "show": true, "copy": null, "locals": "#<Proc:0x00007785ab4fbfc0 /rails/lib/midwest/demo/engine.rb:50 (lambda)>", "partial": "lookbook/panels/assets", "name": "assets" }, "accessibility": { "label": "Accessibility tests", "hotkey": null, "disabled": false, "show": true, "copy": null, "locals": {}, "partial": "lookbook/panels/accessibility", "name": "accessibility" }, "page_theme": { "label": "Page Theme", "hotkey": null, "disabled": false, "show": true, "copy": null, "locals": {}, "partial": "lookbook/panels/page_theme", "name": "page_theme" }, "figma": { "label": "Figma", "hotkey": null, "disabled": false, "show": true, "copy": null, "locals": {}, "partial": "lookbook/panels/figma", "name": "figma" } }, "inputs": {}, "tags": { "status": { "name": "status", "label": "Status", "options": { "named_args": [ "current_status" ], "after_parse": null }, "system": false }, "figma": { "name": "figma", "label": "Figma", "options": { "named_args": [ "figma_url" ], "after_parse": null }, "system": false } } } }

No matching results.

No matching results.

Default

Figma embed for Stat/default

Embed Code

Embed URL