numberbox.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "b32293f2",
   "metadata": {},
   "outputs": [],
   "source": [
    "import mercury as mr"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "12aa5a35",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "<div style=\"text-align: center; width: 100%; border: 1px solid lightgray; margin-right: 0px; margin-top: 15px; padding-top: 40px; padding-bottom: 30px; background: white; border-radius:5px\">\n",
       "  <span style=\"font-size: 4em; color: black; font-family: monospace; \">123</span>\n",
       "  \n",
       "  <span style=\"font-size: 2em; color: gray; display: block; padding-top: 20px; font-family: monospace; line-height: 1.3em;\">Large number</span>\n",
       "</div>\n",
       "  "
      ],
      "text/plain": [
       "<widgets.numberbox.NumberBox at 0x7f2fb896c790>"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "mr.NumberBox(data=123, title=\"Large number\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "fe8af13e",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<style scoped>\n",
       "        .numberbox-container {\n",
       "        width: 100%;\n",
       "        display: flex;\n",
       "        flex-direction: row;\n",
       "        }\n",
       "        @media (max-width: 800px) {\n",
       "        .numberbox-container {\n",
       "            flex-direction: column;\n",
       "        }\n",
       "        }\n",
       "        </style><div class=\"numberbox-container\" style=\"display: flex; background: #fff;\">\n",
       "<div style=\"text-align: center; width: 100%; border: 1px solid lightgray; margin-right: 15px; margin-top: 15px; padding-top: 40px; padding-bottom: 30px; background: white; border-radius:5px\">\n",
       "  <span style=\"font-size: 4em; color: black; font-family: monospace; \">123</span>\n",
       "  \n",
       "  <span style=\"font-size: 2em; color: gray; display: block; padding-top: 20px; font-family: monospace; line-height: 1.3em;\">First number</span>\n",
       "</div>\n",
       "  \n",
       "<div style=\"text-align: center; width: 100%; border: 1px solid lightgray; margin-right: 15px; margin-top: 15px; padding-top: 40px; padding-bottom: 30px; background: white; border-radius:5px\">\n",
       "  <span style=\"font-size: 4em; color: black; font-family: monospace; \">456</span>\n",
       "  \n",
       "  <span style=\"font-size: 2em; color: gray; display: block; padding-top: 20px; font-family: monospace; line-height: 1.3em;\">Second number</span>\n",
       "</div>\n",
       "  \n",
       "<div style=\"text-align: center; width: 100%; border: 1px solid lightgray; margin-right: 0px; margin-top: 15px; padding-top: 40px; padding-bottom: 30px; background: white; border-radius:5px\">\n",
       "  <span style=\"font-size: 4em; color: black; font-family: monospace; \">789</span>\n",
       "  \n",
       "  <span style=\"font-size: 2em; color: gray; display: block; padding-top: 20px; font-family: monospace; line-height: 1.3em;\">Third number</span>\n",
       "</div>\n",
       "  </div>"
      ],
      "text/plain": [
       "<widgets.numberbox.NumberBox at 0x7f2fb896c0d0>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "mr.NumberBox([\n",
    "    mr.NumberBox(data=123, title=\"First number\"),\n",
    "    mr.NumberBox(data=456, title=\"Second number\"),\n",
    "    mr.NumberBox(data=789, title=\"Third number\")\n",
    "])"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "menv",
   "language": "python",
   "name": "menv"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.10"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}