Bar graph


<a href="#" class="c-card ">  <div class="c-card__header">    Card header  </div>  <div class="c-card__body">    <h2 class="c-card__title">      <span class="c-card__title-text">Card Heading</span>      <svg class="c-icon c-card__icon">				<use href="..&#x2F;..&#x2F;icons.svg#chevron-right"></use>			</svg>    </h2>    <!-- end c-card__title -->    <p class="c-card__desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>  </div>  <!-- end c-card__body -->  <div class="c-card__footer">    Card footer  </div>  <!-- end c-card__footer --></a><!-- end c-card -->

THIS IS ANGULAR CODE

THIS IS REACT CODE

Usage

When to use

Usage description.

When to consider an alternative

Alternative usage.

Class Name	Description
c-hero	Apply to the hero block’s containing HTML element. This class sets up the background-image handling and text color for the unit. The `c-hero` element should have just one immediate child, the `c-hero__body` element. Note, too, that the unit’s hero image should be applied as a background image to this `c-hero` element.
c-hero--bare	Add to the `c-hero` element to remove the default gradient overlay from the hero image.
c-hero--tinted	Add to the `c-hero` element to replace the default gradient overlay with a solid, uniform tint.
c-hero__body	Apply to the container for the card body, Which typically includes a title and description (see below) but can include any arbitrary markup including buttons for a call to action. The class manages the card’s background gradient.
c-hero__title	Apply to the card’s heading inside the card body. The recommended element for this class is `<h1>`.
c-hero__desc	Apply to the card’s description text inside the card body. The recommended element for this class is `<p>`.

Fine print

Version: 0.3
Last Updated: April 27, 2017
Owner: Jane Doe

Discuss this component

Bar graph

Usage

When to use

When to consider an alternative

Fine print