Material quotation cards walkthrough

Let's build the above challenge with CSS variables.

Setup

Let's start with a semantic blockquote element

index.html

src/styles.css

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="container">
      <blockquote class="quote-card"></blockquote>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

Card Info

Style the container in center of the screen with responsive width
box-sizing to include padding in its width
Left side slightly indented
Creating nice box for quote card

index.html

src/styles.css

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,200italic);
body {
  background: #eee;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
}
.container {
  max-width: 800px;
  margin: 40px auto;
}
.quote-card {
  padding: 20px;
  padding-left: 50px;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 120px;
}

Card Content

Para content
Cite author name

index.html

src/styles.css

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="container">
      <blockquote class="quote-card">
        <p>
          Dream is not what you see in sleep, dream is something which doesn't
          let you sleep.
        </p>
        <cite> A. P. J. Abdul Kalam </cite>
      </blockquote>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

`CSS Variable`

Adding CSS variable for colors & shadow with fallback
CSS Variable makes it easier to create variants with different themes
CSS Variable gets inherited and can be easily overridden

index.html

src/styles.css

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,200italic);
body {
  background: #eee;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
}
.container {
  max-width: 800px;
  margin: 40px auto;
}
.quote-card {
  padding: 20px;
  padding-left: 50px;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 120px;
  background: var(--card-bg, #fff);
  color: var(--card-clr, #222222);
  box-shadow: var(--card-shadow, 0 2px 4px rgba(34, 34, 34, 0.12));
}

Quote wording

Makes the quote wordings larger and limits its width

index.html

src/styles.css

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,200italic);
body {
  background: #eee;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
}
.container {
  max-width: 800px;
  margin: 40px auto;
}
.quote-card {
  padding: 20px;
  padding-left: 50px;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 120px;
  background: var(--card-bg, #fff);
  color: var(--card-clr, #222222);
  box-shadow: var(--card-shadow, 0 2px 4px rgba(34, 34, 34, 0.12));
}
.quote-card p {
  font-size: 22px;
  line-height: 1.5;
  margin: 0;
  max-width: 80%;
}

Cite wording

Makes the cite wordings slimer & a little transparent

index.html

src/styles.css

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,200italic);
body {
  background: #eee;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
}
.container {
  max-width: 800px;
  margin: 40px auto;
}
.quote-card {
  padding: 20px;
  padding-left: 50px;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 120px;
  background: var(--card-bg, #fff);
  color: var(--card-clr, #222222);
  box-shadow: var(--card-shadow, 0 2px 4px rgba(34, 34, 34, 0.12));
}
.quote-card p {
  font-size: 22px;
  line-height: 1.5;
  margin: 0;
  max-width: 80%;
}
.quote-card cite {
  font-size: 16px;
  margin-top: 10px;
  display: block;
  font-weight: 200;
  opacity: 0.8;
}

Before quote

Choosing “ as a decoration character
Makes it a nicer & larger font
Color blend with background

index.html

src/styles.css

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,200italic);
body {
  background: #eee;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
}
.container {
  max-width: 800px;
  margin: 40px auto;
}
.quote-card {
  padding: 20px;
  padding-left: 50px;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 120px;
  background: var(--card-bg, #fff);
  color: var(--card-clr, #222222);
  box-shadow: var(--card-shadow, 0 2px 4px rgba(34, 34, 34, 0.12));
}
.quote-card p {
  font-size: 22px;
  line-height: 1.5;
  margin: 0;
  max-width: 80%;
}
.quote-card cite {
  font-size: 16px;
  margin-top: 10px;
  display: block;
  font-weight: 200;
  opacity: 0.8;
}
.quote-card:before {
  content: "“";
  font-size: 5em;
  font-family: Georgia, serif;
  font-weight: normal;
  color: var(--quote-clr, rgba(238, 238, 238, 0.8));
}

Before quote positioning

position the quote the absolute to break the normal flow
position the card relative so that quote starts from the card
Adjust position slightly to the top-left

index.html

src/styles.css

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,200italic);
body {
  background: #eee;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
}
.container {
  max-width: 800px;
  margin: 40px auto;
}
.quote-card {
  padding: 20px;
  padding-left: 50px;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 120px;
  background: var(--card-bg, #fff);
  color: var(--card-clr, #222222);
  box-shadow: var(--card-shadow, 0 2px 4px rgba(34, 34, 34, 0.12));
  position: relative;
}
.quote-card p {
  font-size: 22px;
  line-height: 1.5;
  margin: 0;
  max-width: 80%;
}
.quote-card cite {
  font-size: 16px;
  margin-top: 10px;
  display: block;
  font-weight: 200;
  opacity: 0.8;
}
.quote-card:before {
  content: "“";
  top: 10px;
  left: 10px;
  font-size: 5em;
  font-family: Georgia, serif;
  font-weight: normal;
  position: absolute;
  color: var(--quote-clr, rgba(238, 238, 238, 0.8));
}

After quote positioning

Choosing ” as a decoration character to close the quote
Same as before quote but larger and positioned to the bottom-right

index.html

src/styles.css

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,200italic);
body {
  background: #eee;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
}
.container {
  max-width: 800px;
  margin: 40px auto;
}
.quote-card {
  padding: 20px;
  padding-left: 50px;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 120px;
  background: var(--card-bg, #fff);
  color: var(--card-clr, #222222);
  box-shadow: var(--card-shadow, 0 2px 4px rgba(34, 34, 34, 0.12));
  position: relative;
}
.quote-card p {
  font-size: 22px;
  line-height: 1.5;
  margin: 0;
  max-width: 80%;
}
.quote-card cite {
  font-size: 16px;
  margin-top: 10px;
  display: block;
  font-weight: 200;
  opacity: 0.8;
}
.quote-card:before {
  content: "“";
  top: 10px;
  left: 10px;
  font-size: 5em;
  font-family: Georgia, serif;
  font-weight: normal;
  position: absolute;
  color: var(--quote-clr, rgba(238, 238, 238, 0.8));
}
.quote-card:after {
  content: "”";
  bottom: -110px;
  line-height: 100px;
  right: -32px;
  font-size: 25em;
  font-family: Georgia, serif;
  font-weight: normal;
  position: absolute;
  color: var(--quote-clr, rgba(238, 238, 238, 0.8));
}

Common `CSS`

Take common CSS & comma separate it
Distribute the difference to :before & :after (position & size)

index.html

src/styles.css

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,200italic);
body {
  background: #eee;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
}
.container {
  max-width: 800px;
  margin: 40px auto;
}
.quote-card {
  padding: 20px;
  padding-left: 50px;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 120px;
  background: var(--card-bg, #fff);
  color: var(--card-clr, #222222);
  box-shadow: var(--card-shadow, 0 2px 4px rgba(34, 34, 34, 0.12));
  position: relative;
}
.quote-card p {
  font-size: 22px;
  line-height: 1.5;
  margin: 0;
  max-width: 80%;
}
.quote-card cite {
  font-size: 16px;
  margin-top: 10px;
  display: block;
  font-weight: 200;
  opacity: 0.8;
}
.quote-card:before,
.quote-card:after {
  font-family: Georgia, serif;
  font-weight: normal;
  position: absolute;
  color: var(--quote-clr, rgba(238, 238, 238, 0.8));
}
.quote-card:before {
  content: "“";
  top: 10px;
  left: 10px;
  font-size: 5em;
}
.quote-card:after {
  content: "”";
  bottom: -110px;
  line-height: 100px;
  right: -32px;
  font-size: 25em;
}

Responsiveness ✨

Makes the quote smaller on phone screens

index.html

src/styles.css

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,200italic);
body {
  background: #eee;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
}
.container {
  max-width: 800px;
  margin: 40px auto;
}
.quote-card {
  padding: 20px;
  padding-left: 50px;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 120px;
  background: var(--card-bg, #fff);
  color: var(--card-clr, #222222);
  box-shadow: var(--card-shadow, 0 2px 4px rgba(34, 34, 34, 0.12));
  position: relative;
}
.quote-card p {
  font-size: 22px;
  line-height: 1.5;
  margin: 0;
  max-width: 80%;
}
.quote-card cite {
  font-size: 16px;
  margin-top: 10px;
  display: block;
  font-weight: 200;
  opacity: 0.8;
}
.quote-card:before,
.quote-card:after {
  font-family: Georgia, serif;
  font-weight: normal;
  position: absolute;
  color: var(--quote-clr, rgba(238, 238, 238, 0.8));
}
.quote-card:before {
  content: "“";
  top: 10px;
  left: 10px;
  font-size: 5em;
}
.quote-card:after {
  content: "”";
  bottom: -110px;
  line-height: 100px;
  right: -32px;
  font-size: 25em;
}
@media (max-width: 640px) {
  .quote-card:after {
    font-size: 22em;
    right: -25px;
  }
}

Blue card

Make another quote card to customize it later

index.html

src/styles.css

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="container">
      <blockquote class="quote-card">
        <p>
          Dream is not what you see in sleep, dream is something which doesn't
          let you sleep.
        </p>
        <cite> A. P. J. Abdul Kalam </cite>
      </blockquote>
      <blockquote class="quote-card">
        <p>Arise! Awake! and stop not until the goal is reached.</p>
        <cite> Swami Vivekananda </cite>
      </blockquote>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

Add blue-card class to customize it

index.html

src/styles.css

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="container">
      <blockquote class="quote-card">
        <p>
          Dream is not what you see in sleep, dream is something which doesn't
          let you sleep.
        </p>
        <cite> A. P. J. Abdul Kalam </cite>
      </blockquote>
      <blockquote class="quote-card blue-card">
        <p>Arise! Awake! and stop not until the goal is reached.</p>
        <cite> Swami Vivekananda </cite>
      </blockquote>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

Blue variant 💙

Use CSS variable to create a blue variant, the variable will override the value that we have used in the .quote-card

index.html

src/styles.css

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,200italic);
body {
  background: #eee;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
}
.container {
  max-width: 800px;
  margin: 40px auto;
}
.quote-card {
  padding: 20px;
  padding-left: 50px;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 120px;
  background: var(--card-bg, #fff);
  color: var(--card-clr, #222222);
  box-shadow: var(--card-shadow, 0 2px 4px rgba(34, 34, 34, 0.12));
  position: relative;
}
.quote-card p {
  font-size: 22px;
  line-height: 1.5;
  margin: 0;
  max-width: 80%;
}
.quote-card cite {
  font-size: 16px;
  margin-top: 10px;
  display: block;
  font-weight: 200;
  opacity: 0.8;
}
.quote-card:before,
.quote-card:after {
  font-family: Georgia, serif;
  font-weight: normal;
  position: absolute;
  color: var(--quote-clr, rgba(238, 238, 238, 0.8));
}
.quote-card:before {
  content: "“";
  top: 10px;
  left: 10px;
  font-size: 5em;
}
.quote-card:after {
  content: "”";
  bottom: -110px;
  line-height: 100px;
  right: -32px;
  font-size: 25em;
}
@media (max-width: 640px) {
  .quote-card:after {
    font-size: 22em;
    right: -25px;
  }
}
.quote-card.blue-card {
  --card-bg: #303f9f;
  --card-clr: #ffffff;
  --card-shadow: 0 1px 2px rgba(34, 34, 34, 0.12),
    0 2px 4px rgba(34, 34, 34, 0.24);
  --quote-clr: #3f51b5;
}

Red card

Make another quote card with red-card to theme it red

index.html

src/styles.css

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="container">
      <blockquote class="quote-card">
        <p>
          Dream is not what you see in sleep, dream is something which doesn't
          let you sleep.
        </p>
        <cite> A. P. J. Abdul Kalam </cite>
      </blockquote>
      <blockquote class="quote-card blue-card">
        <p>Arise! Awake! and stop not until the goal is reached.</p>
        <cite> Swami Vivekananda </cite>
      </blockquote>
      <blockquote class="quote-card red-card">
        <p>
          INSANITY: Doing the same thing over and over again and expecting
          different results.
        </p>
        <cite> Albert Einstein </cite>
      </blockquote>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

Red variant ❤️

Use CSS variable to create a red variant, the variable will override the value that we have used in the .quote-card

index.html

src/styles.css

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,200italic);
body {
  background: #eee;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
}
.container {
  max-width: 800px;
  margin: 40px auto;
}
.quote-card {
  padding: 20px;
  padding-left: 50px;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 120px;
  background: var(--card-bg, #fff);
  color: var(--card-clr, #222222);
  box-shadow: var(--card-shadow, 0 2px 4px rgba(34, 34, 34, 0.12));
  position: relative;
}
.quote-card p {
  font-size: 22px;
  line-height: 1.5;
  margin: 0;
  max-width: 80%;
}
.quote-card cite {
  font-size: 16px;
  margin-top: 10px;
  display: block;
  font-weight: 200;
  opacity: 0.8;
}
.quote-card:before,
.quote-card:after {
  font-family: Georgia, serif;
  font-weight: normal;
  position: absolute;
  color: var(--quote-clr, rgba(238, 238, 238, 0.8));
}
.quote-card:before {
  content: "“";
  top: 10px;
  left: 10px;
  font-size: 5em;
}
.quote-card:after {
  content: "”";
  bottom: -110px;
  line-height: 100px;
  right: -32px;
  font-size: 25em;
}
@media (max-width: 640px) {
  .quote-card:after {
    font-size: 22em;
    right: -25px;
  }
}
.quote-card.blue-card {
  --card-bg: #303f9f;
  --card-clr: #ffffff;
  --card-shadow: 0 1px 2px rgba(34, 34, 34, 0.12),
    0 2px 4px rgba(34, 34, 34, 0.24);
  --quote-clr: #3f51b5;
}
.quote-card.red-card {
  --card-bg: #d32f2f;
  --card-clr: #ffffff;
  --card-shadow: 0 1px 2px rgba(34, 34, 34, 0.12),
    0 2px 4px rgba(34, 34, 34, 0.24);
  --quote-clr: #f44336;
}

Yellow card

Make another quote card with yellow-card to theme it yellow

index.html

src/styles.css

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="container">
      <blockquote class="quote-card">
        <p>
          Dream is not what you see in sleep, dream is something which doesn't
          let you sleep.
        </p>
        <cite> A. P. J. Abdul Kalam </cite>
      </blockquote>
      <blockquote class="quote-card blue-card">
        <p>Arise! Awake! and stop not until the goal is reached.</p>
        <cite> Swami Vivekananda </cite>
      </blockquote>
      <blockquote class="quote-card red-card">
        <p>
          INSANITY: Doing the same thing over and over again and expecting
          different results.
        </p>
        <cite> Albert Einstein </cite>
      </blockquote>
      <blockquote class="quote-card yellow-card">
        <p>
          Yesterday is history. Tomorrow is a mystery. Today is a gift. That’s
          why we call it ‘The Present’
        </p>
        <cite> Eleanor Roosevelt </cite>
      </blockquote>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

Yellow variant 💛

Use CSS variable to create a yellow variant, the variable will override the value that we have used in the .quote-card

index.html

src/styles.css

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,200italic);
body {
  background: #eee;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 300;
}
.container {
  max-width: 800px;
  margin: 40px auto;
}
.quote-card {
  padding: 20px;
  padding-left: 50px;
  box-sizing: border-box;
  overflow: hidden;
  min-height: 120px;
  background: var(--card-bg, #fff);
  color: var(--card-clr, #222222);
  box-shadow: var(--card-shadow, 0 2px 4px rgba(34, 34, 34, 0.12));
  position: relative;
}
.quote-card p {
  font-size: 22px;
  line-height: 1.5;
  margin: 0;
  max-width: 80%;
}
.quote-card cite {
  font-size: 16px;
  margin-top: 10px;
  display: block;
  font-weight: 200;
  opacity: 0.8;
}
.quote-card:before,
.quote-card:after {
  font-family: Georgia, serif;
  font-weight: normal;
  position: absolute;
  color: var(--quote-clr, rgba(238, 238, 238, 0.8));
}
.quote-card:before {
  content: "“";
  top: 10px;
  left: 10px;
  font-size: 5em;
}
.quote-card:after {
  content: "”";
  bottom: -110px;
  line-height: 100px;
  right: -32px;
  font-size: 25em;
}
@media (max-width: 640px) {
  .quote-card:after {
    font-size: 22em;
    right: -25px;
  }
}
.quote-card.blue-card {
  --card-bg: #303f9f;
  --card-clr: #ffffff;
  --card-shadow: 0 1px 2px rgba(34, 34, 34, 0.12),
    0 2px 4px rgba(34, 34, 34, 0.24);
  --quote-clr: #3f51b5;
}
.quote-card.red-card {
  --card-bg: #d32f2f;
  --card-clr: #ffffff;
  --card-shadow: 0 1px 2px rgba(34, 34, 34, 0.12),
    0 2px 4px rgba(34, 34, 34, 0.24);
  --quote-clr: #f44336;
}
.quote-card.yellow-card {
  --card-bg: #f9a825;
  --card-clr: #222222;
  --card-shadow: 0 1px 2px rgba(34, 34, 34, 0.12),
    0 2px 4px rgba(34, 34, 34, 0.24);
  --quote-clr: #fbc02d;
}

Setup

Let's start with a semantic blockquote element

Card Info

Style the container in center of the screen with responsive width
box-sizing to include padding in its width
Left side slightly indented
Creating nice box for quote card

Card Content

Para content
Cite author name

`CSS Variable`

Adding CSS variable for colors & shadow with fallback
CSS Variable makes it easier to create variants with different themes
CSS Variable gets inherited and can be easily overridden

Quote wording

Makes the quote wordings larger and limits its width

Cite wording

Makes the cite wordings slimer & a little transparent

Before quote

Choosing “ as a decoration character
Makes it a nicer & larger font
Color blend with background

Before quote positioning

position the quote the absolute to break the normal flow
position the card relative so that quote starts from the card
Adjust position slightly to the top-left

After quote positioning

Choosing ” as a decoration character to close the quote
Same as before quote but larger and positioned to the bottom-right

Common `CSS`

Take common CSS & comma separate it
Distribute the difference to :before & :after (position & size)

Responsiveness ✨

Makes the quote smaller on phone screens

Blue card

Make another quote card to customize it later

Add blue-card class to customize it

Blue variant 💙

Use CSS variable to create a blue variant, the variable will override the value that we have used in the .quote-card

Red card

Make another quote card with red-card to theme it red

Red variant ❤️

Use CSS variable to create a red variant, the variable will override the value that we have used in the .quote-card

Yellow card

Make another quote card with yellow-card to theme it yellow

Yellow variant 💛

Use CSS variable to create a yellow variant, the variable will override the value that we have used in the .quote-card

index.html

src/styles.css

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div class="container">
      <blockquote class="quote-card"></blockquote>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

@ragavkumarv

swipe to next ➡️

Blog

Material quotation cards walkthrough

Setup

Card Info

Card Content

CSS Variable

Quote wording

Cite wording

Before quote

Before quote positioning

After quote positioning

Common CSS

Responsiveness ✨

Blue card

Blue variant 💙

Red card

Red variant ❤️

Yellow card

Yellow variant 💛

Setup

Card Info

Card Content

CSS Variable

Quote wording

Cite wording

Before quote

Before quote positioning

After quote positioning

Common CSS

Responsiveness ✨

Blue card

Blue variant 💙

Red card

Red variant ❤️

Yellow card

Yellow variant 💛

`CSS Variable`

Common `CSS`

`CSS Variable`

Common `CSS`