CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/pypi-dash-bootstrap-components

Bootstrap themed components for use in Plotly Dash applications

—

Pending
Overview
Eval results
Files

cards.mddocs/

Card Components

Flexible content containers with headers, bodies, footers, and various styling options for organizing and displaying information.

Capabilities

Card

Main card container component with flexible styling and content organization options.

class Card:
    """
    Flexible content container with Bootstrap card styling.
    
    Args:
        children: Card content (CardHeader, CardBody, CardFooter, etc.)
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        color (str): Card color - "primary", "secondary", "success", "info", "warning", "danger", "light", "dark"
        outline (bool): Use outline style instead of solid background
        inverse (bool): Invert text colors for dark backgrounds
        body (bool): Automatically wrap children in CardBody
    """
    def __init__(self, children=None, id=None, style=None, class_name=None,
                 color=None, outline=False, inverse=False, body=False, **kwargs): ...

CardHeader

Header section component for cards with title and navigation elements.

class CardHeader:
    """
    Header section for cards.
    
    Args:
        children: Header content (text, components)
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
    """
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...

CardBody

Main content area component for cards with padding and typography styling.

class CardBody:
    """
    Main content area for cards with default padding.
    
    Args:
        children: Body content
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
    """
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...

CardFooter

Footer section component for cards with actions and secondary information.

class CardFooter:
    """
    Footer section for cards.
    
    Args:
        children: Footer content
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
    """
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...

CardImg

Image component optimized for card layouts with responsive sizing.

class CardImg:
    """
    Image component for cards with responsive sizing.
    
    Args:
        src (str): Image source URL
        alt (str): Alt text for accessibility
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        top (bool): Position image at top of card
        bottom (bool): Position image at bottom of card
    """
    def __init__(self, src=None, alt=None, id=None, style=None, class_name=None,
                 top=False, bottom=False, **kwargs): ...

CardImgOverlay

Overlay component for placing content over card images.

class CardImgOverlay:
    """
    Content overlay for card images.
    
    Args:
        children: Overlay content
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
    """
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...

CardLink

Link component styled for use within cards.

class CardLink:
    """
    Link component styled for cards.
    
    Args:
        children: Link text or content
        href (str): Link URL
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
        external_link (bool): Open link in new tab
        target (str): Link target
    """
    def __init__(self, children=None, href=None, id=None, style=None, class_name=None,
                 external_link=False, target=None, **kwargs): ...

CardGroup

Container for grouping multiple cards with connected borders.

class CardGroup:
    """
    Container for grouping cards with connected styling.
    
    Args:
        children: Card components to group
        id (str): Component identifier
        style (dict): Inline CSS styles
        class_name (str): Additional CSS classes
    """
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...

Usage Examples

Basic Card

import dash_bootstrap_components as dbc
from dash import html

basic_card = dbc.Card([
    dbc.CardHeader("Card Header"),
    dbc.CardBody([
        html.H4("Card Title", className="card-title"),
        html.P("This is some card content with text.", className="card-text"),
        dbc.Button("Action", color="primary"),
    ]),
    dbc.CardFooter("Card footer text"),
])

Card with Auto Body

# Card with automatic body wrapper
auto_body_card = dbc.Card([
    html.H4("Card Title", className="card-title"),
    html.P("Content automatically wrapped in CardBody.", className="card-text"),
    dbc.Button("Button", color="primary"),
], body=True)

Colored Cards

# Cards with different colors
colored_cards = html.Div([
    dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.H5("Primary Card", className="card-title"),
                    html.P("Card with primary color.", className="card-text"),
                ])
            ], color="primary", inverse=True),
        ], width=4),
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.H5("Success Outline", className="card-title"),
                    html.P("Card with success outline.", className="card-text"),
                ])
            ], color="success", outline=True),
        ], width=4),
        dbc.Col([
            dbc.Card([
                dbc.CardBody([
                    html.H5("Warning Card", className="card-title"),
                    html.P("Card with warning color.", className="card-text"),
                ])
            ], color="warning"),
        ], width=4),
    ])
])

Card with Image

# Card with top image
image_card = dbc.Card([
    dbc.CardImg(src="/static/images/placeholder.jpg", top=True),
    dbc.CardBody([
        html.H4("Image Card", className="card-title"),
        html.P("A card with an image at the top.", className="card-text"),
        dbc.Button("View Details", color="primary"),
    ]),
])

# Card with image overlay
overlay_card = dbc.Card([
    dbc.CardImg(src="/static/images/hero.jpg"),
    dbc.CardImgOverlay([
        html.H4("Overlay Title", className="card-title text-white"),
        html.P("Text overlaid on the image.", className="card-text text-white"),
        dbc.Button("Learn More", color="light", outline=True),
    ]),
])

Interactive Card

from dash import callback, Input, Output

# Card with interactive content
interactive_card = dbc.Card([
    dbc.CardHeader([
        html.H5("Dashboard Stats", className="mb-0"),
    ]),
    dbc.CardBody([
        html.H2(id="stats-value", children="Loading...", className="text-primary"),
        html.P("Total users this month", className="card-text text-muted"),
        dbc.Button("Refresh", id="refresh-btn", color="primary", size="sm"),
    ]),
])

@callback(
    Output("stats-value", "children"),
    [Input("refresh-btn", "n_clicks")],
    prevent_initial_call=True
)
def update_stats(n_clicks):
    import random
    return f"{random.randint(1000, 9999):,}"

Card Deck/Group

# Group of cards with equal height
card_group = dbc.CardGroup([
    dbc.Card([
        dbc.CardImg(src="/static/images/card1.jpg", top=True),
        dbc.CardBody([
            html.H5("Card 1", className="card-title"),
            html.P("First card content.", className="card-text"),
        ]),
        dbc.CardFooter(html.Small("Last updated 3 mins ago", className="text-muted")),
    ]),
    dbc.Card([
        dbc.CardImg(src="/static/images/card2.jpg", top=True),
        dbc.CardBody([
            html.H5("Card 2", className="card-title"),
            html.P("Second card with longer content text.", className="card-text"),
        ]),
        dbc.CardFooter(html.Small("Last updated 5 mins ago", className="text-muted")),
    ]),
    dbc.Card([
        dbc.CardImg(src="/static/images/card3.jpg", top=True),
        dbc.CardBody([
            html.H5("Card 3", className="card-title"),
            html.P("Third card content.", className="card-text"),
        ]),
        dbc.CardFooter(html.Small("Last updated 10 mins ago", className="text-muted")),
    ]),
])

Card Grid Layout

# Responsive card grid
card_grid = dbc.Row([
    dbc.Col([
        dbc.Card([
            dbc.CardBody([
                html.H5("Feature 1", className="card-title"),
                html.P("Description of feature 1.", className="card-text"),
                dbc.CardLink("Learn More", href="#"),
            ])
        ])
    ], xs=12, sm=6, md=4, className="mb-4"),
    dbc.Col([
        dbc.Card([
            dbc.CardBody([
                html.H5("Feature 2", className="card-title"),
                html.P("Description of feature 2.", className="card-text"),
                dbc.CardLink("Learn More", href="#"),
            ])
        ])
    ], xs=12, sm=6, md=4, className="mb-4"),
    dbc.Col([
        dbc.Card([
            dbc.CardBody([
                html.H5("Feature 3", className="card-title"),
                html.P("Description of feature 3.", className="card-text"),
                dbc.CardLink("Learn More", href="#"),
            ])
        ])
    ], xs=12, sm=6, md=4, className="mb-4"),
])

Card with Tabs

# Card containing tabbed content
tabbed_card = dbc.Card([
    dbc.CardHeader([
        dbc.Tabs([
            dbc.Tab(label="Overview", tab_id="overview"),
            dbc.Tab(label="Details", tab_id="details"),
            dbc.Tab(label="Settings", tab_id="settings"),
        ], id="card-tabs", active_tab="overview"),
    ]),
    dbc.CardBody([
        html.Div(id="card-tab-content"),
    ]),
])

@callback(
    Output("card-tab-content", "children"),
    [Input("card-tabs", "active_tab")]
)
def render_card_tab_content(active_tab):
    if active_tab == "overview":
        return html.P("Overview content goes here.")
    elif active_tab == "details":
        return html.P("Detailed information content.")
    elif active_tab == "settings":
        return html.P("Settings and configuration options.")
    return html.P("Select a tab to view content.")

Profile Card

# User profile card example
profile_card = dbc.Card([
    dbc.CardImg(src="/static/images/avatar.jpg", top=True, style={"width": "100px", "height": "100px", "border-radius": "50%", "margin": "20px auto", "display": "block"}),
    dbc.CardBody([
        html.H4("John Doe", className="card-title text-center"),
        html.P("Software Engineer", className="card-text text-center text-muted"),
        html.Hr(),
        html.Div([
            html.Small("Email: john.doe@example.com", className="text-muted d-block"),
            html.Small("Phone: (555) 123-4567", className="text-muted d-block"),
            html.Small("Location: San Francisco, CA", className="text-muted d-block"),
        ]),
    ]),
    dbc.CardFooter([
        dbc.ButtonGroup([
            dbc.Button("Message", color="primary", size="sm"),
            dbc.Button("Call", color="success", size="sm"),
            dbc.Button("Email", color="info", size="sm"),
        ], className="w-100"),
    ]),
], style={"width": "300px"})

Install with Tessl CLI

npx tessl i tessl/pypi-dash-bootstrap-components

docs

buttons.md

cards.md

content.md

feedback.md

forms.md

index.md

interactive.md

layout.md

modals.md

navigation.md

themes.md

tile.json