Card¶

CardTitle¶

class django_propeller.card.CardTitle¶

Renders a Card Title.

Parameters:

text

The display text for the title.

size

The size for the title as integer. Works with the h-tag, so size=1 is bigger than size=3. Optional. (default=3)

CardSubtitle¶

class django_propeller.card.CardSubtitle¶

Renders a Card Subtitle.

Parameters:

text

The display text for the subtitle.

CardBody¶

class django_propeller.card.CardBody¶

Renders a Card Body.

Parameters:

text

The text to display in the body.

CardHeader¶

class django_propeller.card.CardHeader¶

Renders a Card Header.

Parameters:

content_left

A list of items to display on the left of header. May contain Button, FAB, Image, CardTitle, or CardSubtitle.

content_middle

A list of items to display in the middle of header. May contain Button, FAB, Image, CardTitle, or CardSubtitle.

CardMediaActions¶

class django_propeller.card.CardMediaActions¶

Renders Card Media Actions.

Parameters:

items

A list of items to display in the Card Media Action section. May contain Button or FAB.

CardActions¶

class django_propeller.card.CardActions¶

Renders Card Actions.

Parameters:

items

A list of items to display in the Card Action section. May contain Button or FAB.

CardMediaImage¶

class django_propeller.card.CardMediaImage¶

Renders a Card Media Image.

Parameters:

image

Must be an instance of an Image.

CardMedia¶

class django_propeller.card.CardMedia¶

Renders Card Media

Parameters:

content

if style_inline=True:

A list of items to display in the card media section. May contain CardMediaImage, CardTitle, or CardSubtitle.

or if style_inline=False: (default)

A instance of CardMediaImage

style_inline

Display card with inline style if true. (Default: False)

Card¶

class django_propeller.card.Card¶

Card is a class that generates a Propeller Card.

Parameters:

primary_title

An instance of CardTitle. Optional.

secondary_title

An instance of CardSubtitle. Optional.

header

An instance of CardHeader. Optional.

media

An instance of CardMedia. Optional.

body

An instance of CardBody. Optional.

actions

An instance of CardActions. Optional.

media_actions

An instance of CardMediaActions. Optional.

style_inverse

Display dark style if true. (Default: False)

style_inline

Display card with inline style if true. (Default: False)

width

Width of the card in Bootstrap grid (col-md) as integer. (Default: 4)

Card Example¶

card.py:

from django_propeller.card import Card, CardHeader, CardActions, CardMediaActions, CardTitle, CardSubtitle, \
CardMediaImage, CardBody, CardMedia
from django_propeller.components import Image, Button, FAB

class DemoTitle(CardTitle):
    text = "Title goes here"
    size = 2


class DemoSubtitle(CardSubtitle):
    text = "Secondary text"


class DemoMediaImage(CardMediaImage):
    image = Image(source="http://propeller.in/assets/images/profile-pic.png", responsive=True)


class DemoMedia(CardMedia):
    content = [DemoMediaImage(), ]


class DemoBody(CardBody):
    text = "Cards provide context and an entry point to more robust information and views. " \
           "Don't overload cards with extraneous information or actions."


class DemoHeader(CardHeader):
    content_middle = [DemoTitle(), DemoSubtitle()]


class DemoActions(CardActions):
    items = [
        Button(content='primary', button_class='btn-primary'),
        Button('Action'),
    ]


class DemoMediaActions(CardMediaActions):
    items = [
        FAB('', button_class='btn-primary', icon='share', style='flat', size='sm'),
        FAB('', button_class='btn-primary', icon='thumb_up', style='flat', size='sm'),
        FAB('', button_class='btn-primary', icon='drafts', style='flat', size='sm')
    ]


class DemoCard(Card):
    primary_title = DemoTitle()
    secondary_title = DemoSubtitle()
    header = DemoHeader()
    actions = DemoActions()
    media_actions = DemoMediaActions()
    media = DemoMedia()
    body = DemoBody()

your_template.html:

{% load propeller %}
{% propeller_card card %}