cards

elements.py

@@ -12,7 +12,7 @@ class Group:
 
     def button(self, text, on_click=None) -> jp.Button:
 
-        b = jp.Button(text=text, a=self.view, classes='p-2 w-48 bg-blue-700 text-white text-center')
+        b = jp.Button(text=text, a=self.view, classes='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded')
         if on_click is not None:
             b.on('click', handle_exceptions(provide_arguments(on_click)))
         return b
@@ -33,6 +33,11 @@ class Group:
         yield
         jp.Matplotlib(a=self.view)
 
+    @contextmanager
+    def card(self):
+
+        yield Card(self)
+
     @contextmanager
     def column(self):
 
@@ -64,6 +69,14 @@ class Page(Group):
         self.view = jp.WebPage(delete_flag=False, body_classes='m-4', title='Nice GUI', favicon='favicon.png')
 
 
+class Card(Group):
+
+    def __init__(self, parent) -> None:
+
+        self.parent = parent
+        self.view = jp.Div(a=parent.view, classes='p-4 flex flex-col gap-4 items-start rounded shadow-lg')
+
+
 class Column(Group):
 
     def __init__(self, parent) -> None:

main.py

@@ -12,12 +12,14 @@ with ui.row() as row:
         right.label("Update itself:")
         right.button('Button 2', on_click=lambda e: setattr(e.sender, 'text', e.sender.text + ' :)'))
 
-with ui.row() as row:
-    row.checkbox('Let''s check...', on_change=lambda e: row.label('Check!' if e.checked else 'Uncheck.'))
+with ui.card() as card:
+
+    with card.plot():
+        plt.title('Some plot')
+        plt.plot(range(10), [x**2 for x in range(10)])
 
-with ui.plot():
-    plt.title('Some plot')
-    plt.plot(range(10), [x**2 for x in range(10)])
+    with card.row() as row:
+        row.checkbox('Let''s check...', on_change=lambda e: row.label('Check!' if e.checked else 'Uncheck.'))
 
 time = ui.label('Time:')
 def update_time():