Card

See: https://material.io/components/cards

Cards contain content and actions about a single subject.

class materialweb.tags.card.Card(*args, **kwargs)

Provides template tag: Card.

Example usage:

{% load materialweb %}

{% Card %}
  {% Card_PrimaryAction %}
    {% Card_Media class="mdc-card__media--square" %}
      Title
    {% endCard_Media %}
    <!-- ... additional primary action content ... -->
  {% endCard_PrimaryAction %}

  {% Card_Actions %}
    <div class="mdc-card__action-buttons">
      {% Button %}
        {% Button_Label %}Action 1{% endButton_Label %}
      {% endButon %}
      {% Button %}
        {% Button_Label %}Action 2{% endButton_Label %}
      {% endButon %}
    </div>
    <div class="mdc-card__action-icons">

      {% trans "Share" as label %}
      {% IconButton label=label class="material-icons" %}
        share
      {% endIconButton %}

      {% trans "More options" as label %}
      {% IconButton label=label class="material-icons" %}
        more_vert
      {% endIconButton %}
    </div>
  {% endCard_Actions %}
{% endCard %}

Example output:

<div class="mdc-card">
  <div class="mdc-card__primary-action">
    <div class="mdc-card__media mdc-card__media--square">
      <div class="mdc-card__media-content">Title</div>
    </div>
    <!-- ... additional primary action content ... -->
  </div>
  <div class="mdc-card__actions">
    <div class="mdc-card__action-buttons">
      <button class="mdc-button mdc-card__action mdc-card__action--button">
        <div class="mdc-button__ripple"></div>
        <span class="mdc-button__label">Action 1</span>
      </button>
      <button class="mdc-button mdc-card__action mdc-card__action--button">
        <div class="mdc-button__ripple"></div>
        <span class="mdc-button__label">Action 2</span>
      </button>
    </div>
    <div class="mdc-card__action-icons">
      <button title="Share"
          class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon">
        share
      </button>
      <button title="More options"
          class="material-icons mdc-icon-button mdc-card__action mdc-card__action--icon">
        more_vert
      </button>
    </div>
  </div>
</div>

WANT_CHILDREN = True

Template Tag needs closing end tag.

MODES = ('elevated', 'outlined')

Available variants.

class materialweb.tags.card.PrimaryAction(*args, **kwargs)

Provides template tag: Card_PrimaryAction.

If a majority of the card (or even the entire card) should be actionable.

Example usage:

{% load materialweb %}

{% Card_PrimaryAction tabindex="0" %}
  <!-- content within actionable area -->
{% endCard_PrimaryAction %}

Example output:

<div class="mdc-card__primary-action" tabindex="0">
  <!-- content within actionable area -->
</div>

WANT_CHILDREN = True

Template Tag needs closing end tag.

class materialweb.tags.card.RichMedia(*args, **kwargs)

Provides template tag: Card_Media.

This area is used for showing rich media in cards, and optionally as a container.

Example usage:

{% load materialweb %}

{% Card_Media class="my-card__media mdc-card__media--16-9" %}
  Title
{% endCard_Media %}

Example output:

<div class="my-card__media mdc-card__media mdc-card__media--16-9">
  <div class="mdc-card__media-content">Title</div>
</div>

WANT_CHILDREN = True

Template Tag needs closing end tag.

MODES = ('default', 'square')

Available variants.

class materialweb.tags.card.Actions(*args, **kwargs)

Provides template tag: Card_Actions.

This area is used to show different actions the user can take, typically at the bottom of a card. It’s often used with buttons.

Example usage:

{% load materialweb %}

{% Card_Actions mode="full_bleed" %}
  {% Button tag="a" href="#" %}
    {% Button_Label %}
      {% trans "All Business Headlines" %}
    {% endButton_Label %}
    {% Button_Icon tag="i" class="material-icons" %}
      arrow_forward
    {% endButton_Icon %}
  {% endButton %}
{% endCard_Actions %}

Example output:

<div class="mdc-card__actions mdc-card__actions--full-bleed">
  <a href="#"
      class="mdc-button mdc-card__action mdc-card__action--button">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">All Business Headlines</span>
    <i class="material-icons mdc-button__icon" aria-hidden="true">
      arrow_forward
    </i>
  </a>
</div>

WANT_CHILDREN = True

Template Tag needs closing end tag.

MODES = ('default', 'full_bleed')

Available variants.

class materialweb.tags.card.Content(*args, **kwargs)

Provides template tag: Card_Content.

It can occasionally be useful to add non-semantic elements to a card. For instance, some implementations might do this to add an overlay layer.

In this case, it’s important to delineate between semantic (real) content and non-semantic content added by the implementation. To achieve this, simply wrap the semantic content in an mdc-card__content element. The non-semantic content can remain at the card’s top level.

Example usage:

{% load materialweb %}

{% Card %}
  {% Card_Content %}
    <!-- ... semantic content ... -->
  {% endCard_Content %}
  <!-- ... non-semantic content ... -->
{% endCard %}

Example output:

<div class="mdc-card">
  <div class="mdc-card__content">
    <!-- ... semantic content ... -->
  </div>
  <!-- ... non-semantic content ... -->
</div>

WANT_CHILDREN = True

Template Tag needs closing end tag.