Styleguide version 1.0.4

Most Read Articles 

<section class="o-most-read">
    <div class="o-most-read__wrap">
        <div class="o-most-read__container">
            <div class="o-most-read__row">
                <div class="o-most-read__heading-wrap">
                    <h5 class="o-most-read__heading">Nos articles les plus lus</h5>
                </div>
                <div class="o-most-read__inner">
                    <div class="o-most-read__list">
                        <article class="o-most-read__card">
                            <a href="#">
                                <div class="o-most-read__card-content">
                                    <span class="o-most-read__number"></span>
                                    <h1 class="o-most-read__title">Michel Fugain: La mort de ma fille m&#x27;a rendu meilleur</h1>
                                    <svg class="a-icon a-icon--primary" role="img" title="Michel Fugain: La mort de ma fille m&#x27;a rendu meilleur">
											<use xlink:href="#article" />
										</svg>
                                </div>
                                <div class="o-most-read__category">
                                    <hr> Reportages
                                </div>
                            </a>
                        </article>
                        <article class="o-most-read__card">
                            <a href="#">
                                <div class="o-most-read__card-content">
                                    <span class="o-most-read__number"></span>
                                    <h1 class="o-most-read__title">Michel Fugain: La mort de ma fille m&#x27;a rendu meilleur</h1>
                                    <svg class="a-icon a-icon--primary" role="img" title="Michel Fugain: La mort de ma fille m&#x27;a rendu meilleur">
											<use xlink:href="#article" />
										</svg>
                                </div>
                                <div class="o-most-read__category">
                                    <hr> Reportages
                                </div>
                            </a>
                        </article>
                        <article class="o-most-read__card">
                            <a href="#">
                                <div class="o-most-read__card-content">
                                    <span class="o-most-read__number"></span>
                                    <h1 class="o-most-read__title">Michel Fugain: La mort de ma fille m&#x27;a rendu meilleur</h1>
                                    <svg class="a-icon a-icon--primary" role="img" title="Michel Fugain: La mort de ma fille m&#x27;a rendu meilleur">
											<use xlink:href="#article" />
										</svg>
                                </div>
                                <div class="o-most-read__category">
                                    <hr> Reportages
                                </div>
                            </a>
                        </article>
                        <article class="o-most-read__card">
                            <a href="#">
                                <div class="o-most-read__card-content">
                                    <span class="o-most-read__number"></span>
                                    <h1 class="o-most-read__title">Michel Fugain: La mort de ma fille m&#x27;a rendu meilleur</h1>
                                    <svg class="a-icon a-icon--primary" role="img" title="Michel Fugain: La mort de ma fille m&#x27;a rendu meilleur">
											<use xlink:href="#article" />
										</svg>
                                </div>
                                <div class="o-most-read__category">
                                    <hr> Reportages
                                </div>
                            </a>
                        </article>
                        <article class="o-most-read__card">
                            <a href="#">
                                <div class="o-most-read__card-content">
                                    <span class="o-most-read__number"></span>
                                    <h1 class="o-most-read__title">Michel Fugain: La mort de ma fille m&#x27;a rendu meilleur</h1>
                                    <svg class="a-icon a-icon--primary" role="img" title="Michel Fugain: La mort de ma fille m&#x27;a rendu meilleur">
											<use xlink:href="#article" />
										</svg>
                                </div>
                                <div class="o-most-read__category">
                                    <hr> Reportages
                                </div>
                            </a>
                        </article>
                        <article class="o-most-read__card">
                            <a href="#">
                                <div class="o-most-read__card-content">
                                    <span class="o-most-read__number"></span>
                                    <h1 class="o-most-read__title">Michel Fugain: La mort de ma fille m&#x27;a rendu meilleur</h1>
                                    <svg class="a-icon a-icon--primary" role="img" title="Michel Fugain: La mort de ma fille m&#x27;a rendu meilleur">
											<use xlink:href="#article" />
										</svg>
                                </div>
                                <div class="o-most-read__category">
                                    <hr> Reportages
                                </div>
                            </a>
                        </article>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
 
<section class="o-most-read">
	<div class="o-most-read__wrap">
		<div class="o-most-read__container">
			<div class="o-most-read__row">
				<div class="o-most-read__heading-wrap">
					<h5 class="o-most-read__heading">{{heading}}</h5>
				</div>
				<div class="o-most-read__inner">
					<div class="o-most-read__list">
						{{#each article }}
						<article class="o-most-read__card">
							<a href="#">
								<div class="o-most-read__card-content">
									<span class="o-most-read__number"></span>
{{!-- 									<div class="o-most-read__card-content-wrap">
 --}}										<h1 class="o-most-read__title">{{title}}</h1>
										{{> @a-icon icon}}
{{!-- 									</div>
 --}}								</div>
								<div class="o-most-read__category">
									<hr>
									{{category}}
								</div>
							</a>
						</article>
						{{/each}}
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
  • Content: 
    .o-most-read {
	@include fluid-props(padding-top padding-bottom, $fluid-min, $fluid-max, 30px, 45px);
	font-family: $font-highlight;
	counter-reset: article;

	&__wrap {
		@extend .grid-wrapper;
	}
	&__container {
		@extend .grid-container;
	}
	&__row {
		@extend .row;
	}

	&__heading-wrap {
		@extend .col-xs-12;
	}

	&__heading {
		@extend .u-t-title-hlt-2;
		@include fluid-props(margin-bottom, $fluid-min, $fluid-max, 25px, 35px);
		@include fluid-props(padding-bottom, $fluid-min, $fluid-max, 5px, 25px);

		text-align: center;
		position: relative;
		margin-top: 0;

		&::after {
			@include fluid-props(width, $fluid-min, $fluid-max, 45px, 70px);

			content: " ";
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			margin-left: auto;
			margin-right: auto;
			display: block;
			height: 1px;
			background-color: $color-primary;

			@include media($sm-breakpoint) {
				height: 2px;
			}
		}
	}

	&__inner {
		@extend .col-xs-12;
		@extend .col-sm-offset-1;
		@extend .col-sm-10;

	}

	&__list {
		width: 100%;
		padding: 0 8px;

		@include media($sm-breakpoint) {
			column-count: 2;
		}
	}

	&__card {
		position: relative;
		counter-increment: article;
		display: inline-block;
		width: 100%;

		@include media($sm-breakpoint) {
			padding-right: 8px;

			&:nth-child(n+4) {
				padding-right: 0;
				padding-left: 8px;
			}
		}

		@include hover-behaviour {
			.o-most-read__category hr::after {
				width: 100%;
			}
		}
	}

	&__card-content {
		position: relative;
		display: flex;
		align-items: center;

		&-wrap {
			position: relative;
			max-width: 100%;
			flex-basis: 100%;
			display: flex;
			justify-content: flex-end;
		}

		svg {
			position: relative;
			@include fluid-props(top, $fluid-min, $fluid-max, -4px, -8px); // align to top of text
			// align-self: flex-start;
		}
	}

	&__number {
		@include fluid-props(padding-top padding-bottom, $fluid-min, $fluid-max, 10px, 20px);
		@include fluid-props(font-size, $fluid-min, $fluid-max, 10px, 22px);
		@include fluid-props(flex-basis, $fluid-min, $fluid-max, 28px, 48px);
		@include fluid-props(height, $fluid-min, $fluid-max, 28px, 56px);

		font-weight: $font-weight-bold;
		color: $color-text-negative;
		background-color: $color-primary;
		flex-shrink: 0;
		display: block;
		text-align: center;
		position: relative;

		&::before {
			content: counter(article, decimal-leading-zero);
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}

	&__title {

		@include fluid-props(font-size, $fluid-min, $fluid-max, 11px, 16px);
		@include fluid-props(line-height, $fluid-min, $fluid-max, 14px, 22px);
		@include fluid-props(margin-left, $fluid-min, $fluid-max, 8px, 15px);

		letter-spacing: 0.5px;
		display: inline-block;
		vertical-align: middle;
		color: $color-text;
		flex-grow: 1;
		flex-basis: 80%;
		font-weight: $font-weight-semi;
		transition: color $transition-fast ease-out;

		@include hover-behaviour {
			color: $color-primary;
		}
	}

	svg {
		@include fluid-props(flex-basis height, $fluid-min, $fluid-max, 18px, 24px);
		@include fluid-props(margin-left, $fluid-min, $fluid-max, 20px, 28px);

		flex-shrink: 0;

	}

	&__category {
		@include fluid-props(font-size, $fluid-min, $fluid-max, 9px, 10px);
		@include fluid-props(line-height, $fluid-min, $fluid-max, 10px, 12px);
		text-transform: uppercase;
		font-weight: $font-weight-bold;
		letter-spacing: 1px;
		color: $color-gray-dark;
		text-align: right;
		margin: 6px 0;
		display: flex;
		align-items: center;

		hr {
			position: relative;
			height: 1px;
			margin: 0;
			margin-right: 20px;
			outline: 0;
			border: 0;
			background-color: $color-text-lighten;
			flex: 1 1 auto;
			overflow: visible;

			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				height: 2px;
				background-color: $color-primary;
				z-index: 1;
				width: 0;
				transition: width $transition-fast ease-out;

			}
		}
	}
}
  • URL: /components/raw/o-most-read/_o-most-read.scss
  • Filesystem Path: src/components/organisms/o-most-read/_o-most-read.scss
  • Size: 3.9 KB 
{
  "heading": "Nos articles les plus lus",
  "article": [
    {
      "url": "#",
      "title": "Michel Fugain: La mort de ma fille m'a rendu meilleur",
      "category": "Reportages",
      "icon": {
        "name": "article",
        "title": "Michel Fugain: La mort de ma fille m'a rendu meilleur",
        "modifier": "primary"
      }
    },
    {
      "url": "#",
      "title": "Michel Fugain: La mort de ma fille m'a rendu meilleur",
      "category": "Reportages",
      "icon": {
        "name": "article",
        "title": "Michel Fugain: La mort de ma fille m'a rendu meilleur",
        "modifier": "primary"
      }
    },
    {
      "url": "#",
      "title": "Michel Fugain: La mort de ma fille m'a rendu meilleur",
      "category": "Reportages",
      "icon": {
        "name": "article",
        "title": "Michel Fugain: La mort de ma fille m'a rendu meilleur",
        "modifier": "primary"
      }
    },
    {
      "url": "#",
      "title": "Michel Fugain: La mort de ma fille m'a rendu meilleur",
      "category": "Reportages",
      "icon": {
        "name": "article",
        "title": "Michel Fugain: La mort de ma fille m'a rendu meilleur",
        "modifier": "primary"
      }
    },
    {
      "url": "#",
      "title": "Michel Fugain: La mort de ma fille m'a rendu meilleur",
      "category": "Reportages",
      "icon": {
        "name": "article",
        "title": "Michel Fugain: La mort de ma fille m'a rendu meilleur",
        "modifier": "primary"
      }
    },
    {
      "url": "#",
      "title": "Michel Fugain: La mort de ma fille m'a rendu meilleur",
      "category": "Reportages",
      "icon": {
        "name": "article",
        "title": "Michel Fugain: La mort de ma fille m'a rendu meilleur",
        "modifier": "primary"
      }
    }
  ]
}

There are no notes for this item.