# Media objects Media, Media.Left, Media.Right, Media.Heading, Media.List, Media.ListItem

Abstract object styles for building various types of components (like blog comments, Tweets, etc) that feature a left or right aligned image alongside textual content.


            const mediaInstance = (
              <div>
                <Media>
                 <Media.Left>
                    <img width={64} height={64} src="/imgs/app/thumbnail.png" alt="Image"/>
                  </Media.Left>
                  <Media.Body>
                    <Media.Heading>Media Heading</Media.Heading>
                    <p><LoremIpsum query='4s' /></p>
                  </Media.Body>
                </Media>
                <Media>
                  <Media.Left>
                    <img width={64} height={64} src="/imgs/app/thumbnail.png" alt="Image"/>
                  </Media.Left>
                  <Media.Body>
                    <Media.Heading>Media Heading</Media.Heading>
                    <p><LoremIpsum query='4s' /></p>
                    <Media>
                      <Media.Left>
                        <img width={64} height={64} src="/imgs/app/thumbnail.png" alt="Image"/>
                      </Media.Left>
                      <Media.Body>
                        <Media.Heading>Nested Media Heading</Media.Heading>
                        <p><LoremIpsum query='4s' /></p>
                      </Media.Body>
                    </Media>
                  </Media.Body>
                </Media>
                <Media>
                  <Media.Body>
                    <Media.Heading>Media Heading</Media.Heading>
                    <p><LoremIpsum query='4s' /></p>
                  </Media.Body>
                  <Media.Right>
                    <img width={64} height={64} src="/imgs/app/thumbnail.png" alt="Image"/>
                  </Media.Right>
                </Media>
                <Media>
                  <Media.Left>
                    <img width={64} height={64} src="/imgs/app/thumbnail.png" alt="Image"/>
                  </Media.Left>
                  <Media.Body>
                    <Media.Heading>Media Heading</Media.Heading>
                    <p><LoremIpsum query='4s' /></p>
                  </Media.Body>
                   <Media.Right>
                    <img width={64} height={64} src="/imgs/app/thumbnail.png" alt="Image"/>
                  </Media.Right>
                </Media>
              </div>
            );

            
          

# Media Alignment

The images or other media can be aligned top, middle, or bottom. The default is top aligned.


            const mediaAlignmentInstance = (
              <div>
                <Media>
                  <Media.Left align="top">
                    <img width={64} height={64} src="/imgs/app/thumbnail.png" alt="Image"/>
                  </Media.Left>
                  <Media.Body>
                    <Media.Heading>Top aligned media</Media.Heading>
                    <p><LoremIpsum query='4s' /></p>
                    <p><LoremIpsum query='3s' /></p>
                  </Media.Body>
                </Media>
                <Media>
                  <Media.Left align="middle">
                    <img width={64} height={64} src="/imgs/app/thumbnail.png" alt="Image"/>
                  </Media.Left>
                  <Media.Body>
                    <Media.Heading>Middle aligned media</Media.Heading>
                    <p><LoremIpsum query='4s' /></p>
                    <p><LoremIpsum query='3s' /></p>
                  </Media.Body>
                </Media>
                <Media>
                  <Media.Left align="bottom">
                    <img width={64} height={64} src="/imgs/app/thumbnail.png" alt="Image"/>
                  </Media.Left>
                  <Media.Body>
                    <Media.Heading>Bottom aligned media</Media.Heading>
                    <p><LoremIpsum query='4s' /></p>
                    <p><LoremIpsum query='3s' /></p>
                  </Media.Body>
                </Media>
              </div>
            );

            
          

# Media list

You can use media inside list (useful for comment threads or articles lists).


            const mediaListInstance = (
              <div>
                <Media.List>
                  <Media.ListItem>
                    <Media.Left>
                      <img width={64} height={64} src="/imgs/app/thumbnail.png" alt="Image"/>
                    </Media.Left>
                    <Media.Body>
                      <Media.Heading>Media heading</Media.Heading>
                      <p><LoremIpsum query='2s' /></p>

                        <Media>
                          <Media.Left>
                            <img width={64} height={64} src="/imgs/app/thumbnail.png" alt="Image"/>
                          </Media.Left>
                          <Media.Body>
                            <Media.Heading>Nested media heading</Media.Heading>
                            <p><LoremIpsum query='2s' /></p>

                            <Media>
                              <Media.Left>
                                <img width={64} height={64} src="/imgs/app/thumbnail.png" alt="Image"/>
                              </Media.Left>
                              <Media.Body>
                                <Media.Heading>Nested media heading</Media.Heading>
                                <p><LoremIpsum query='2s' /></p>
                              </Media.Body>
                            </Media>
                          </Media.Body>
                        </Media>

                        <Media>
                          <Media.Left>
                            <img width={64} height={64} src="/imgs/app/thumbnail.png" alt="Image"/>
                          </Media.Left>
                          <Media.Body>
                            <Media.Heading>Nested media heading</Media.Heading>
                            <p><LoremIpsum query='2s' /></p>
                          </Media.Body>
                        </Media>
                    </Media.Body>
                  </Media.ListItem>
                </Media.List>
              </div>
            );

            
          

# Props

Media

NameTypeDefaultDescription
componentClasselementType'div'You can use a custom element for the media container

Media.Left

NameTypeDefaultDescription
alignone of: 'top', 'middle', 'bottom'Align the media to the top, middle or bottom of the media object

Media.Right

NameTypeDefaultDescription
alignone of: 'top', 'middle', 'bottom'Align the media to the top, middle or bottom of the media object

Media.Heading

NameTypeDefaultDescription
componentClasselementType'h4'You can use a custom element for the media container

Media.Body

NameTypeDefaultDescription
componentClasselementType'div'You can use a custom element for the media container