Styleguide

Subscription List 

<div class="subscription-list ">
    <h3 class="title-small-boxed">Anmeldung zu den Varianten dieses Bildungsgangs</h3>

    <ul>

        <li>
            <div class="subscription-item">
                <div class="subscription-item-details">
                    <div class="subscription-item-title">lorem ipsum</div>
                    <div class="subscription-item-text">
                        lorem ipsum dolor sit amet consecteur
                    </div>
                </div>
                <div class="subscription-item-cta">
                    <a href="#lorem" class="btn btn-primary">Anmelden</a>
                </div>
            </div>
        </li>
        <li>
            <div class="subscription-item">
                <div class="subscription-item-details">
                    <div class="subscription-item-title">lorem ipsum</div>
                    <div class="subscription-item-text">
                        lorem ipsum dolor sit amet consecteur
                    </div>
                </div>
                <div class="subscription-item-cta">
                    <a href="#lorem" class="btn btn-primary">Anmelden</a>
                </div>
            </div>
        </li>
        <li>
            <div class="subscription-item">
                <div class="subscription-item-details">
                    <div class="subscription-item-title">lorem ipsum</div>
                    <div class="subscription-item-text">
                        lorem ipsum dolor sit amet consecteur
                    </div>
                </div>
                <div class="subscription-item-cta">
                    <a href="#lorem" class="btn btn-primary">Anmelden</a>
                </div>
            </div>
        </li>
    </ul>

</div>
 
<div class="subscription-list {{ wrapper_class }}">
    <h3 class="title-small-boxed">{{ title }}</h3>

    <ul>

        {% for item in items%}
        <li>
            <div class="subscription-item">
                <div class="subscription-item-details">
                    <div class="subscription-item-title">{{ item.title }}</div>
                    <div class="subscription-item-text">
                        {% if item.text is iterable %}
                            {% for text in item.text %}
                                {{ text }}
                            {% endfor %}
                        {% else %}
                            {{ item.text }}
                        {% endif %}
                    </div>
                </div>
                {% if item.link_text %}
                    <div class="subscription-item-cta">
                        <a href="{{ item.link_href }}" class="btn btn-primary">{{ item.link_text }}</a>
                    </div>
                {% endif %}
            </div>
        </li>
        {% endfor %}
    </ul>

</div>
 
{
  "title": "Anmeldung zu den Varianten dieses Bildungsgangs",
  "items": [
    {
      "item": null,
      "title": "lorem ipsum",
      "text": "lorem  ipsum dolor sit amet consecteur",
      "link_href": "#lorem",
      "link_text": "Anmelden"
    },
    {
      "item": null,
      "title": "lorem ipsum",
      "text": "lorem  ipsum dolor sit amet consecteur",
      "link_href": "#lorem",
      "link_text": "Anmelden"
    },
    {
      "item": null,
      "title": "lorem ipsum",
      "text": "lorem  ipsum dolor sit amet consecteur",
      "link_href": "#lorem",
      "link_text": "Anmelden"
    }
  ],
  "wrapper_class": null
}
  • Content: 
    .subscription-list {
	margin-bottom: 6rem;

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.title-small-boxed {
		@include media-breakpoint-down(sm) {
			background: none;
			padding: 2rem 0 1rem;
		}
	}

	.subscription-item {
		padding: 1.5rem 0;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
    border-bottom: 2px solid $color-medium-grey;

		@include media-breakpoint-up(md) {
			flex-wrap: nowrap;
			padding: 1.5rem;
		}

		.subscription-item-details {
			flex-grow: 1;

			.subscription-item-title {
				font-weight: 700;
			}
			.subscription-item-text {
				//font-style: italic;
				p {
					margin: 0px;
				}

				.description {
					padding-top: 10px;
				}

				.orange-line {
					color: $primary;
				}
			}
		}
		.subscription-item-cta {
			width: 100%;
			margin-bottom: 2rem;
			@include media-breakpoint-up(sm) {
				width: auto;
				margin-bottom: 0;
			}
			.btn {
				width: 100%;
				text-align: center;
				justify-content: center;
				margin-top: 1rem;
				height: 5rem;
				font-size: 2rem;

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

  &.small-btns {
    li:not(:first-child) {
      .subscription-item .subscription-item-cta .btn {
        font-size: 1.5rem;
        height: 4rem;
        padding: 0 1rem;
      }
    }
  }
}
  • URL: /components/raw/subscription-list/subscription-list.scss
  • Filesystem Path: components/02-components/subscription-list/subscription-list.scss
  • Size: 1.3 KB
  • Handle: @subscription-list
  • Preview:
  • Filesystem Path: components/02-components/subscription-list/subscription-list.twig

There are no notes for this item.