Alt Text for Image

1. Element

Is a (HTML5) element e.g.: image, text, heading, embed, iframe, scripts; wrapped in a wrapper-div.

Are the most ‘bottom’ level of elements that are being used to show content and are part of the MPS core.

This can be a text, a header, a form, but also the call of a javascript  or an image. Let’s call it the elements in which the content will be loaded. Elements are (just like Blocks) part of a pretty static library which are created in the very first beginning of a Design System and when done right don’t need much maintenance.

On a design level the Elements are the assets from the Brand Identity like the logo, colours and fonts.

When talking development – these are typical the HTML(5) tags e.g.: <p>, <form>, <img> etc. etc.  and are part of the Model (library).

Code Example

<?php

    // ELEMENT: IMAGE
    // Version: 1.2

?>

<div <?php echo $pbmps_element_wrapper; ?>>
    <figure class="<?php echo $pbmps_element_template . '__' . $id . '--' . $type; ?> <?php echo $pbmps_element_classes; ?>" <?php echo $pbmps_element_id; ?> <?php echo $pbmps_element_title; ?> <?php echo $pbmps_element_attribute ?> <?php echo $pbmps_element_type; ?>>
        <img <?php echo $pbmps_element_src; ?> <?php echo $pbmps_element_width; ?> <?php echo $pbmps_element_height; ?> <?php echo $pbmps_element_alt; ?> />
        <?php if ( $pbmps_element_caption != '' ) { ?><figcaption><?php echo $pbmps_element_caption; ?></figcaption><?php } ?>
    </figure>
</div>

Tags: <div> (inside can be any HTML tag that's related to the HTML object)

Note: These are not per se HTML5 tags.

Social Share Buttons and Icons powered by Ultimatelysocial