Styleguide

Pseudo Table 

<div class="pseudo-table">
    <div class="pseudo-table-item row">
        <div class="col col-12 col-sm-3"><img src="https://placehold.it/200x80"></div>
        <div class="col col-12 col-sm-7 ">lorem ipsum</div>
        <div class="col col-12 col-sm-2"><a href="" class="btn btn-primary">Details</a></div>
    </div>

    <div class="pseudo-table-item row">
        <div class="col col-12 col-sm-3"><img src="https://placehold.it/200x80"></div>
        <div class="col col-12 col-sm-7 ">lorem ipsum</div>
        <div class="col col-12 col-sm-2"><a href="" class="btn btn-primary">Details</a></div>
    </div>

    <div class="pseudo-table-item row">
        <div class="col col-12 col-sm-3"><img src="https://placehold.it/200x80"></div>
        <div class="col col-12 col-sm-7 ">lorem ipsum</div>
        <div class="col col-12 col-sm-2"><a href="" class="btn btn-primary">Details</a></div>
    </div>

    <div class="pseudo-table-item row">
        <div class="col col-12 col-sm-3"><img src="https://placehold.it/200x80"></div>
        <div class="col col-12 col-sm-7 ">lorem ipsum</div>
        <div class="col col-12 col-sm-2"><a href="" class="btn btn-primary">Details</a></div>
    </div>

</div>
 
<div class="pseudo-table">
  {% for item in items %}
    {{ item }}
  {% endfor %}
</div>
 
{
  "items": [
    {
      "$pseudo-table-item": null,
      "image": "<img src=\"https://placehold.it/200x80\">",
      "content": "lorem ipsum",
      "button_href": "",
      "button_label": ""
    },
    {
      "$pseudo-table-item": null,
      "image": "<img src=\"https://placehold.it/200x80\">",
      "content": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
      "button_href": "",
      "button_label": "Details"
    },
    {
      "$pseudo-table-item": null,
      "image": "<img src=\"https://placehold.it/200x80\">",
      "content": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
      "button_href": "",
      "button_label": ""
    },
    {
      "$pseudo-table-item": null,
      "image": "<img src=\"https://placehold.it/200x80\">",
      "content": "lorem ipsum",
      "button_href": "",
      "button_label": "Details"
    }
  ]
}
  • Content: 
    .pseudo-table {
	.pseudo-table-item {
		border-bottom: 1px solid #ccc;

		padding: 1rem 0;
		align-items: center;

		.btn {
			height: 5rem;
			width: 100%;
			text-align: center;
			justify-content: center;

			margin-top: 1rem;

			@include media-breakpoint-up(sm) {
				margin-top: 0;
			}
		}

		img {
			max-width: 100%;
      height: auto;
		}
	}
}
  • URL: /components/raw/pseudo-table/pseudo-table.scss
  • Filesystem Path: components/02-components/pseudo-table/pseudo-table.scss
  • Size: 355 Bytes

There are no notes for this item.