diff --git a/theme/assets/src/block-editor/blocks/card/block.json b/theme/assets/src/block-editor/blocks/card/block.json
index 49407b36d..f4437ac37 100644
--- a/theme/assets/src/block-editor/blocks/card/block.json
+++ b/theme/assets/src/block-editor/blocks/card/block.json
@@ -30,6 +30,10 @@
     "isEditMode": {
       "type": "boolean",
       "default": false
+    },
+    "postContentLength": {
+      "type": "number",
+      "default": 20
     }
   },
   "title": "Material Card for Query loop",
diff --git a/theme/assets/src/block-editor/blocks/card/inspectControl.js b/theme/assets/src/block-editor/blocks/card/inspectControl.js
index 6a3114475..1cfbb26d6 100644
--- a/theme/assets/src/block-editor/blocks/card/inspectControl.js
+++ b/theme/assets/src/block-editor/blocks/card/inspectControl.js
@@ -27,9 +27,12 @@ import { InspectorControls } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import genericAttributesSetter from '../../../../../../plugin/assets/src/block-editor/utils/generic-attributes-setter';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import { PanelBody, RangeControl, ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+const MIN_POST_CONTENT_LENGTH = 10;
+const MAX_POST_CONTENT_LENGTH = 30;
+
 /**
  * @param {Object}   props
  * @param {Function} props.setAttributes
@@ -40,6 +43,7 @@ import { __ } from '@wordpress/i18n';
  * @param {boolean}  props.attributes.showDate
  * @param {boolean}  props.attributes.showAuthor
  * @param {boolean}  props.attributes.showComments
+ * @param {number}   props.attributes.postContentLength
  */
 const InspectControls = ( {
 	setAttributes,
@@ -50,6 +54,7 @@ const InspectControls = ( {
 		showDate,
 		showAuthor,
 		showComments,
+		postContentLength,
 	},
 } ) => {
 	const setter = genericAttributesSetter( setAttributes );
@@ -58,37 +63,53 @@ const InspectControls = ( {
 			<PanelBody
 				title={ __(
 					'Show / Hide post information',
-					'material-design'
+					'material-design-google'
+				) }
+				description={ __(
+					'Choose which information to show in the card.',
+					'material-design-google'
 				) }
 				initialOpen={ true }
 			>
 				<ToggleControl
-					label={ __( 'Featured Image', 'material-design' ) }
+					label={ __( 'Featured Image', 'material-design-google' ) }
 					checked={ showFeaturedImage }
 					onChange={ setter( 'showFeaturedImage' ) }
 				/>
 				<ToggleControl
-					label={ __( 'Post title', 'material-design' ) }
+					label={ __( 'Post title', 'material-design-google' ) }
 					checked={ showTitle }
 					onChange={ setter( 'showTitle' ) }
 				/>
 				<ToggleControl
-					label={ __( 'Post date', 'material-design' ) }
+					label={ __( 'Post date', 'material-design-google' ) }
 					checked={ showDate }
 					onChange={ setter( 'showDate' ) }
 				/>
 				<ToggleControl
-					label={ __( 'Post excerpt', 'material-design' ) }
+					label={ __( 'Post excerpt', 'material-design-google' ) }
 					checked={ showExcerpt }
 					onChange={ setter( 'showExcerpt' ) }
 				/>
+				{ showExcerpt && (
+					<RangeControl
+						label={ __(
+							'Max number of words in post excerpt',
+							'material-design-google'
+						) }
+						value={ postContentLength }
+						onChange={ setter( 'postContentLength' ) }
+						min={ MIN_POST_CONTENT_LENGTH }
+						max={ MAX_POST_CONTENT_LENGTH }
+					/>
+				) }
 				<ToggleControl
-					label={ __( 'Author', 'material-design' ) }
+					label={ __( 'Author', 'material-design-google' ) }
 					checked={ showAuthor }
 					onChange={ setter( 'showAuthor' ) }
 				/>
 				<ToggleControl
-					label={ __( 'Comments', 'material-design' ) }
+					label={ __( 'Comments', 'material-design-google' ) }
 					checked={ showComments }
 					onChange={ setter( 'showComments' ) }
 				/>
diff --git a/theme/assets/src/block-editor/blocks/card/save.js b/theme/assets/src/block-editor/blocks/card/save.js
deleted file mode 100644
index 7e9c8f157..000000000
--- a/theme/assets/src/block-editor/blocks/card/save.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright 2020 Google LLC
- *
- * Licensed uder the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * External dependencies
- */
-/**
- * WordPress dependencies
- */
-import { useBlockProps } from '@wordpress/block-editor';
-import ServerSideRender from '@wordpress/server-side-render';
-
-import { name } from './block.json';
-/**
- * Edit.
- *
- * @return {JSX.Element} Block edit.
- */
-const Edit = () => {
-	return (
-		<div { ...useBlockProps.save() }>
-			<ServerSideRender block={ name } />
-		</div>
-	);
-};
-
-export default Edit;
diff --git a/theme/assets/src/front-end/components/masonry.js b/theme/assets/src/front-end/components/masonry.js
index 664cc4842..f1979ba2c 100644
--- a/theme/assets/src/front-end/components/masonry.js
+++ b/theme/assets/src/front-end/components/masonry.js
@@ -57,6 +57,12 @@ const resizeGridItem = cell => {
 		return;
 	}
 
+	const cellCard = cell.querySelector( '.post-card' );
+
+	if ( ! cellCard ) {
+		return;
+	}
+
 	const rowHeight = parseInt(
 		window
 			.getComputedStyle( gridElement )
@@ -71,9 +77,7 @@ const resizeGridItem = cell => {
 		10
 	);
 
-	const contentHeight = cell
-		.querySelector( '.post-card' )
-		.getBoundingClientRect().height;
+	const contentHeight = cellCard.getBoundingClientRect().height;
 
 	const rowSpan = Math.ceil(
 		( contentHeight + rowGap ) / ( rowHeight + rowGap )
diff --git a/theme/template-parts/blocks/card-query.php b/theme/template-parts/blocks/card-query.php
index 5540753cf..72d2d8e92 100644
--- a/theme/template-parts/blocks/card-query.php
+++ b/theme/template-parts/blocks/card-query.php
@@ -34,14 +34,16 @@
 $is_edit             = $attributes['isEditMode'];
 $show_featured_image = $attributes['showFeaturedImage'];
 $show_post_title     = $attributes['showTitle'];
+$content_length      = isset( $attributes['postContentLength'] ) ? $attributes['postContentLength'] : 20;
 $classes             = get_theme_mod( 'archive_outlined', false ) ? 'mdc-card--outlined' : '';
 
 if ( empty( $block ) || ! isset( $block->context['postId'] ) ) {
 	return '';
 }
-$post_ID   = $block->context['postId']; // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
-$post      = get_post( $post_ID ); // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
-$post_link = $is_edit ? '#link-to-' . $post_ID : get_the_permalink( $post );
+$post_ID      = $block->context['postId']; // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
+$post         = get_post( $post_ID ); // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
+$post_link    = $is_edit ? '#link-to-' . $post_ID : get_the_permalink( $post );
+$post_content = wp_trim_words( get_the_excerpt( $post ), $content_length, ' [&hellip;]' );
 ?>
 	<div class="post-card__container">
 		<div id="<?php echo esc_attr( $post_ID ); ?>" <?php post_class( "mdc-card post-card $classes" ); ?>>
@@ -83,9 +85,9 @@ class="post-card__subtitle mdc-typography mdc-typography--subtitle2"><?php echo
 						<?php endif; ?>
 					</div>
 				</div>
-				<?php if ( ! empty( $show_excerpt ) ) : ?>
+				<?php if ( ! empty( $show_excerpt ) && has_excerpt( $post ) ) : ?>
 					<div
-						class="post-card__secondary mdc-typography mdc-typography--body2"><p><?php echo wp_kses_post( get_the_excerpt( $post ) ); ?></p></div>
+						class="post-card__secondary mdc-typography mdc-typography--body2"><p><?php echo wp_kses_post( $post_content ); ?></p></div>
 				<?php endif; ?>
 			</a>
 			<?php if ( ! empty( $show_author ) || ! empty( $show_comments ) ) : ?>