Skip to content

Card

In Dash and the dash-bootstrap-components (dbc) library, dbc.Card is a component used to create a card or a content container that can display various types of content within a styled box.

Cards are often used to present information or components in a visually appealing and organized way. They can contain text, images, graphs, or other elements, and you can customize their appearance and layout.

Here are some key features and characteristics of dbc.Card:

  1. Content Container: It serves as a container for displaying content, which can include text, images, graphs, links, buttons, or any other HTML components.

  2. Styling: You can apply styling to the card, such as setting a background color, border, and padding to control its appearance.

  3. Header and Footer: You can add header and footer sections to the card for titles, additional information, or buttons.

  4. Interactive Elements: You can include interactive elements within the card, like buttons and links, to create interactive dashboards or web applications.

  5. Responsive Design: Cards can be used in responsive layouts, making them suitable for different screen sizes and devices.

Here's a simple example of how to use dbc.Card to create a card in a Dash application:

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Card(
    dbc.CardBody([
        html.H4("Card Title"),
        html.P("This is some text content in the card."),
        dbc.Button("Learn More", color="primary", href="#"),
    ])
)

if __name__ == '__main__':
    app.run_server(debug=True)

In this example, we use dbc.Card to create a simple card with a title, text content, and a "Learn More" button. The card is wrapped in dbc.CardBody to encapsulate its content. You can further customize the appearance and structure of the card according to your application's needs. Cards are versatile components commonly used for presenting information in a user-friendly and visually appealing way.