--- title: Media description: The Media component is used to present user activity chronologically. --- ## Types ### Default media object ```html

Emma

Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae scelerisque.

``` ### Default media object with actions menu ```html

Emma

Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae scelerisque.

``` ### Inline media object ```html

Emma

Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae scelerisque.

``` ### Column media object ```html

Emma

Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae scelerisque.

``` ## Alignment ### Center ```html

Emma

Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae scelerisque.

``` ```html

Emma

Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae scelerisque.

``` Alignment modifiers can also be applied to elements within the media container (`__figure` & `__body`) ```html

Emma

Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae scelerisque.

``` ### Bottom ```html

Emma

Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae scelerisque.

``` ## Order ### Reverse ```html

Emma

Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae scelerisque.

``` ## Nesting ```html

Emma

Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae scelerisque.

Emma

Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae scelerisque.

```