Card#

class alfred3.element.display.Card(header: Union[str, alfred3.element.core.Element] = '', title: Union[str, alfred3.element.core.Element] = '', subtitle: Union[str, alfred3.element.core.Element] = '', body: Union[str, alfred3.element.core.Element] = '', footer: Union[str, alfred3.element.core.Element] = '', emojize: bool = True, render_markdown: bool = True, collapse: bool = False, start_collapsed: bool = True, header_style: str = '', body_style: str = '', footer_style: str = '', **kwargs)[source]#

Bases: alfred3.element.core.Element

A card that can be used to display text or other elements.

Parameters

header (str, Element) – Strings or elements to display in the respective parts of the card.
title (str, Element) – Strings or elements to display in the respective parts of the card.
subtitle (str, Element) – Strings or elements to display in the respective parts of the card.
body (str, Element) – Strings or elements to display in the respective parts of the card.
footer (str, Element) – Strings or elements to display in the respective parts of the card.
emojize – If True (default), emoji shortcodes in the text will be converted to unicode (i.e. emojis will be displayed).
render_markdown (bool, optional) – If True (default), markdown will be rendered to html.
collapse (bool, optional) – If True, the card header becomes a button that can be used to hide and show the card body. Defaults to False.
start_collapsed (bool, optional) – If True, the card body will start in collapsed mode. Only has an effect, if collapse is True. Defaults to True.
header_style (str, optional) – Can be used to add css classes to the header, body, and footer of the card. For example, bg-success text-white will turn the background green and the text white. See https://getbootstrap.com/docs/4.5/utilities/colors/ for some possible coloring options.
body_style (str, optional) – Can be used to add css classes to the header, body, and footer of the card. For example, bg-success text-white will turn the background green and the text white. See https://getbootstrap.com/docs/4.5/utilities/colors/ for some possible coloring options.
footer_style (str, optional) – Can be used to add css classes to the header, body, and footer of the card. For example, bg-success text-white will turn the background green and the text white. See https://getbootstrap.com/docs/4.5/utilities/colors/ for some possible coloring options.

**kwargs –

Inherited keyword arguments

align	Horizontal alignment of text in the element. Does not usually apply to labels. Think of it as an alignment that applies to the innermost layer of an element (while labels are generally located at outer layers). See `LabelledElement` for more on labelled elements. Can be left (default), center, right, or justify.
font_size	Font size for text in the element. You can use a keyword or an exact specification. The available keywords are tiny, small, normal, big, and huge. The exact specification shoul ideally include a unit, such as 1rem, or 12pt. If you supply an integer without a unit, a unit of pt will be assumed. Defaults to normal.
height	Vertical height of the elements display area. Supply a string with a unit, e.g. 80px. Usually, the default is fine. For adding vertical space to a page, you should prefer the `VerticalSpace` element, as it is sematically more clear.
instance_log	If True, the element will use an instance-specific logger, thereby allowing detailed fine- tuning of its logging behavior.
name	Name of the element. This should be a unique identifier. It will be used to identify the corresponding data in the final data set.
position	Horizontal position of the full element on the page. Values can be left, center (default), end, or any valid value for the justify-content flexbox utility. Takes effect only, when the element is not full-width.
showif	A dictionary, defining conditions that must be met for the element to be shown. The conditions take the form of key-value pairs, where each key is an element name and the value is the required input. See `showif` for details.
width	Defines the horizontal width of the element from small screens upwards. It is always full-width on extra small screens. Possible values are narrow, medium, wide, and full. For more detailed control, you can define the `element_width` attribute.

Examples

Basic usage:

import alfred3 as al
exp = al.Experiment()

@exp.member
class Demo(al.Page):
    def on_exp_access(self):
        self += al.Card(
            header="Card Header",
            title="Card title",
            subtitle="Card subtitle",
            body=al.Text("**This text** is placed in the body.", align="center"),
        )

Methods

`add_css`	Adds CSS to the element.
`add_js`	Adds Javascript to the element.
`added_to_experiment`	Tells the element that it was added to an experiment.
`added_to_page`	Tells the element that it was added to a page.
`prepare_web_widget`	Hook for computations for preparing an element's web widget.
`render_inner_html`	Renders the element template `element_template`.
`render_text`	Renders the markdown and emoji shortcodes in `text`

Attributes

`base_template`	Base template for the element, which will be used to hold the rendered element template.
`body`	Card body
`converted_width`	List of bootstrap column widths at different screen sizes.
`css_class_container`	Returns the name the element container's CSS class.
`css_class_element`	Returns the name of the element's CSS class.
`css_code`	A list of tuples, which contain a priority and CSS code.
`css_urls`	A list of tuples, which contain a priority and an url pointing to CSS code.
`display_standalone`	If True (default), the element will be displayed as usual on its own.
`element_template`	The element's specific, inner template.
`element_width`	Returns a string of column width definitions.
`exp`	The experiment session to which this element belongs.
`experiment`	Alias for `exp`
`font_size`	Font size
`footer`	Card footer.
`header`	Card header.
`js_code`	A list of tuples, which contain a priority and Javascript.
`js_urls`	A list of tuples, which contain a priority and an url pointing to JavaScript.
`name`	Unique identifier for the element.
`page`	The page to which this element belongs.
`position`	Position of the whole element on the page.
`section`	The direct parent section of this element's page.
`short_tree`	String, giving the exact position in the experiment.
`should_be_shown`	Boolean, indicating whether the element is meant to be shown.
`showif`	Conditions that have to be met for the element to be shown.
`subtitle`	Card subtitle.
`template_data`	Dictionary of data to be passed on to jinja templates.
`title`	Card title.
`tree`	String, giving the exact position in the experiment.
`web_widget`	The element's rendered html code for display on a page.
`width`	Element width