Card: Label

<div class="o-card o-card">
    <a class="o-card__link u-hover-grow-image" href="#">
        <div class="o-card__content">
            <div class="o-card__text">
                <h2 class="o-card__text-title f-title--h4">
                    <span class="u-hover-drawline">Delaware Watershed Initiative</span>
                </h2>

                <p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

            </div>

            <p class="o-card__content-label f-text--tag f-upper f-spaced">Featured Article

            </p>

            <div class="o-card__img">

                <img src="/images/fossil-spiral.jpg" alt="image of woman in a lake" />

            </div>

        </div>
    </a>

</div>
{% set hTag = hTag is defined ? hTag : "h2" %}
{% set hClass = hSize == 'small' ? 'f-title--h5' : 'f-title--h4' %}
{% set hClass = hSize == 'xsmall' ? 'f-title--h6 f-reg' : hClass %}

<div class="o-card o-card">
	<a class="o-card__link u-hover-grow-image" href="{{ link }}">
		<div class="o-card__content">
			<div class="o-card__text">
				<{{hTag}} class="o-card__text-title {{ hClass }}">
					<span class="u-hover-drawline">{{title}}</span>
				</{{hTag}}>
				{% if description %}
					<p class="o-card__text-description f-text--small ">{{description}}</p>
				{% endif %}
			</div>

			{% if label %}
				<p class="o-card__content-label f-text--tag f-upper f-spaced">{{ label }}
					{% if labelAdditional %}
						<span class="u-sep-dot"></span>
						{{ labelAdditional }}
					{% endif %}
				</p>

			{% endif %}

			<div class="o-card__img">
        {% if videoEmbed %}
          <div class="o-card__video">
            {{ videoEmbed|raw }}
          </div>
        {% else %}
          {{ image }}
        {% endif %}
			</div>

		</div>
	</a>

	{% if tagLinks %}
		<ul class="o-card__tags">
			{% for tagLink in tagLinks %}
				<li class="o-card__tag">
					{% include '04-objects/tag' with tagLink only %}
				</li>
			{% endfor %}
		</ul>
	{% endif %}

	{% if dateDay %}
		<p class="o-card__date-day f-text--time">{{ dateDay }}</p>
	{% endif %}
	{% if dateTime %}
		<p class="o-card__date-time f-text--time">{{ dateTime }}</p>
	{% endif %}


</div>
{
  "pageColorTheme": "teal",
  "link": "#",
  "title": "Delaware Watershed Initiative",
  "description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
  "image": "<img src=\"/images/fossil-spiral.jpg\" alt=\"image of woman in a lake\" />",
  "label": "Featured Article"
}
  • Content:
    .o-card {
      position: relative;
    }
    
    .o-card__link {
      display: block;
    }
    
    .o-card__content {
      display: flex;
      flex-direction: column;
    }
    
    .o-card__content-label {
      margin-bottom: 1rem;
      order: 1;
      border-top: 0.1rem solid var(--ct-txt);
      padding-top: 1rem;
      color: inherit;
    }
    
    .o-card__img {
      order: 2;
      overflow: hidden;
    }
    
    .o-card__video {
      position: relative;
      overflow: hidden;
    
      &:after {
        content: '';
        display: block;
        padding-bottom: 56.25%;
      }
    
      iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
    
    .o-card__text {
      order: 3;
    }
    
    .o-card__text-title {
      margin: 2rem 0 0.8rem;
    }
    
    .o-card__tags {
      margin-top: 2rem;
    }
    
    .o-card__tag {
      display: inline-block;
      margin-right: 1rem;
    }
    
    .o-card__date-day {
      margin-top: 1.2rem;
    }
    
    .o-card__date-time {
      margin-top: 0.4rem;
    }
    
  • URL: /components/raw/card/card.scss
  • Filesystem Path: patterns\04-objects\card\card.scss
  • Size: 919 Bytes

No notes defined.