CSS Example: Create a Media Object With Flexbox Example 5

<!doctype html>
<title>Example</title>
<style>
  .media {
    display: flex;
    align-items: flex-start;
    background: #F6F3EB;
    padding: 1em;
    border-radius: 3px;
    max-width: 24em;
  }
  .media-object {
    margin-right: .4em;
    font-size: 4em;
  }
  .media-body {
    flex: 1;
  }
  .media-heading {
    margin: 0 0 .5em;
  }
</style>
<div class="media">
  <div class="media-object">&#x1F60E;</div>
  <div class="media-body">
    <h3 class="media-heading">Organically Synthesized</h3>
    <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
  </div>
</div>

 
<!doctype html>
<title>Example</title>
<style>
  .media {
    display: flex;
    align-items: flex-start;
    background: #F6F3EB;
    padding: 1em;
    border-radius: 3px;
    max-width: 24em;
  }
  .media-object {
    margin-right: .4em;
    font-size: 4em;
  }
  .media-body {
    flex: 1;
  }
  .media-heading {
    margin: 0 0 .5em;
  }
</style>
<div class="media">
  <div class="media-object">&#x1F60E;</div>
  <div class="media-body">
    <h3 class="media-heading">Organically Synthesized</h3>
    <p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition.</p>
  </div>
</div>

In this example, the left side provides the code used to render the output in the right side.

Feel free to copy and paste the code into your own project and modify as you wish.

More Examples >>

About CSS

CSS stands for Cascading Style Sheets. It's used to add styles to web pages. It's typically added to HTML pages using the <link> tag, so that we can have the CSS in a separate file to the HTML file. However, we also have the option of embedding the CSS in the actual HTML file by using the <style> HTML tag, or by using the style attribute within an individual HTML tag.