<div class="bux-qa bux-qa--storytelling ">
<div class="bux-qa__item">
<h2 class="bux-qa__question">
<span class="visually-hidden">Question</span>
<div class="bux-qa__question-text">This is a question?</div>
</h2>
<div class="bux-qa__answer">
<span class="visually-hidden">Answer</span>
<div class="bux-qa__answer-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="bux-qa__item">
<h2 class="bux-qa__question">
<span class="visually-hidden">Question</span>
<div class="bux-qa__question-text">This is a Question?</div>
</h2>
<div class="bux-qa__answer">
<span class="visually-hidden">Answer</span>
<div class="bux-qa__answer-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="bux-qa__item">
<h2 class="bux-qa__question">
<span class="visually-hidden">Question</span>
<div class="bux-qa__question-text">This is a Question?</div>
</h2>
<div class="bux-qa__answer">
<span class="visually-hidden">Answer</span>
<div class="bux-qa__answer-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
{#
Q+A
Available variables:
- modifier: Sets the Q+A variant. Either null or storytelling.
- heading_level: Integer value for the Q+A title.
- items: Array containing the Q+A items.
- item.question: String for the question.
- item.answer: Content of the answer.
#}
<div class="bux-qa {% if modifier %} bux-qa--{{modifier}} {% endif %}">
{% for item in items %}
<div class="bux-qa__item">
<h{{heading_level|default(2)}} class="bux-qa__question">
{% if modifier != "storytelling" %}
<span class="bux-qa__question-marker" aria-hidden="true">Q</span>
{% endif %}
<span class="visually-hidden">Question</span>
<div class="bux-qa__question-text">{{ item.question }}</div>
</h{{heading_level|default(2)}}>
<div class="bux-qa__answer">
{% if modifier != "storytelling" %}
<span class="bux-qa__answer-marker" aria-hidden="true">A</span>
{% endif %}
<span class="visually-hidden">Answer</span>
<div class="bux-qa__answer-text">{{ item.answer }}</div>
</div>
</div>
{% endfor %}
</div>
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
items:
- question: This is a question?
answer: >-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
- question: This is a Question?
answer: >-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
- question: This is a Question?
answer: >-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
modifier: storytelling
.bux-qa__item {
margin-bottom: $sp-32;
&:last-child {
margin-bottom: 0;
}
}
.bux-qa__question {
display: flex;
;
}
.bux-qa__answer {
display: flex;
}
.bux-qa__question-marker,
.bux-qa__answer-marker {
background: $gray-light-80;
height: $sp-32;
min-width: $sp-32;
margin-right: $sp-16;
font-family: $sans;
font-size: $ts-20;
font-weight: 700;
line-height: 1.675;
text-align: center;
}
.bux-qa__question-marker {
line-height: 1.625;
}
.bux-qa__question-text {
@include heading($ts-20, 26, 700);
margin: $sp-4 0 0;
}
.bux-qa__answer-text {
@extend .bux-paragraph;
margin-bottom: 0;
}
.bux-qa--storytelling {
.bux-qa__question {
margin-top: $sp-32;
margin-bottom: $sp-16;
}
.bux-qa__question-text {
font-family: $sans;
font-size: $ts-base;
font-weight: 700;
margin-bottom: 0;
}
.bux-qa__answer {
margin-bottom: 0;
}
.bux-qa__answer-text {
font-family: $serif;
font-size: $ts-base;
}
}
No notes defined.