get term by ID for css output

On one of my custom page templates, I am replacing the default loop with a list of terms from one of my custom taxonomies. While outputting these terms, I want to wrap them in an article element that I can designate a class to by each’s respective id so that I can have the div pull a background image from the css to associate w/ each listing. Basically, I want my html to output all terms associated with my custom taxonomy in the form of article blocks that contain the term name:

<article class="stage_feature bkgd_(id#)">....</article>
<article class="stage_feature bkgd_(id#)">....</article>

…until all taxonomy terms have been listed in the form of articles running one after the other.

My function is as follows:

function smt_product_blox() {
	 $terms = get_terms('smt_equipment_family');
 	if ( !empty( $terms ) && !is_wp_error( $terms ) ){
     foreach ( $terms as $term ) {
       echo "<article class='stage_feature bkgd_". $term_id ."'><h1>". $term->name . "</h1></article>";
     }
 	}
}

I cannot figure out how to get the term id integer injected into the class name. This function doesn’t work, as the rendered html just shows a class of “stage_feature bkgd_” for the article element.