Check with your designers to help you design this section
Check with your designers to help you design this section
<div class="raul-list-group">
<form>
<div class="raul-list-group-item">
<div class="raul-list-group-header">
<span>List Group Label</span>
</div>
<ul>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div>
<div class="custom-control custom-radio custom-control-sm custom-control-right-next">
<input
type="radio"
id="custom-radio-1"
name="custom-radio"
class="custom-control-input"
>
<label class="custom-control-label" for="custom-radio-1">(Optional Text)</label>
</div>
</div>
</label>
</li>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div class="clearfix">
<div class="custom-control custom-radio custom-control-sm custom-control-right-next">
<input
type="radio"
id="custom-radio-2"
name="custom-radio"
class="custom-control-input"
>
<label class="custom-control-label" for="custom-radio-2">(Optional Text)</label>
</div>
</div>
</label>
</li>
</ul>
</div>
<div class="raul-list-group-item">
<div class="raul-list-group-header">
<span>List Group Label</span>
</div>
<ul>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div>
<div class="custom-control custom-radio custom-control-sm custom-control-right-next">
<input
type="radio"
id="custom-radio-3"
name="custom-radio"
class="custom-control-input"
>
<label class="custom-control-label" for="custom-radio-3">(Optional Text)</label>
</div>
</div>
</label>
</li>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div class="clearfix">
<div class="custom-control custom-radio custom-control-sm custom-control-right-next">
<input
type="radio"
id="custom-radio-4"
name="custom-radio"
class="custom-control-input"
>
<label class="custom-control-label" for="custom-radio-4">(Optional Text)</label>
</div>
</div>
</label>
</li>
</ul>
</div>
</form>
</div>
<div class="raul-list-group">
<form>
<div class="raul-list-group-item">
<ul>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div>
<div class="custom-control custom-radio custom-control-sm custom-control-right-next">
<input
type="radio"
id="custom-radio-5"
name="custom-radio"
class="custom-control-input"
>
<label class="custom-control-label" for="custom-radio-5">(Optional Text)</label>
</div>
</div>
</label>
</li>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div class="clearfix">
<div class="custom-control custom-radio custom-control-sm custom-control-right-next">
<input
type="radio"
id="custom-radio-6"
name="custom-radio"
class="custom-control-input"
>
<label class="custom-control-label" for="custom-radio-6">(Optional Text)</label>
</div>
</div>
</label>
</li>
</ul>
</div>
</form>
</div>
<div class="raul-list-group">
<form>
<div class="raul-list-group-item">
<div class="raul-list-group-header">
<span>List Group Label</span>
</div>
<ul>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div>
<div
class="custom-control custom-checkbox custom-control-sm custom-control-right-next"
>
<input type="checkbox" class="custom-control-input" id="custom-check-1">
<label class="custom-control-label" for="custom-check-1">(Optional Text)</label>
</div>
</div>
</label>
</li>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div class="clearfix">
<div
class="custom-control custom-checkbox custom-control-sm custom-control-right-next"
>
<input type="checkbox" class="custom-control-input" id="custom-check-2">
<label class="custom-control-label" for="custom-check-2">(Optional Text)</label>
</div>
</div>
</label>
</li>
</ul>
</div>
<div class="raul-list-group-item">
<div class="raul-list-group-header">
<span>List Group Label</span>
</div>
<ul>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div>
<div
class="custom-control custom-checkbox custom-control-sm custom-control-right-next"
>
<input type="checkbox" class="custom-control-input" id="custom-check-3">
<label class="custom-control-label" for="custom-check-3">(Optional Text)</label>
</div>
</div>
</label>
</li>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div class="clearfix">
<div class="
custom-control
custom-checkbox
custom-control-sm
custom-control-right-next
custom-control-no-text
">
<input type="checkbox" class="custom-control-input" id="custom-check-4">
<label class="custom-control-label" for="custom-check-4"></label>
</div>
</div>
</label>
</li>
</ul>
</div>
</form>
</div>
<div class="raul-list-group">
<form>
<div class="raul-list-group-item">
<ul>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div>
<div
class="custom-control custom-checkbox custom-control-sm custom-control-right-next"
>
<input type="checkbox" class="custom-control-input" id="custom-check-5">
<label class="custom-control-label" for="custom-check-5">(Optional Text)</label>
</div>
</div>
</label>
</li>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div class="clearfix">
<div class="
custom-control
custom-checkbox
custom-control-sm
custom-control-right-next
custom-control-no-text
">
<input type="checkbox" class="custom-control-input" id="custom-check-6">
<label class="custom-control-label" for="custom-check-6"></label>
</div>
</div>
</label>
</li>
</ul>
</div>
</form>
</div>
<div class="raul-list-group">
<form>
<div class="raul-list-group-item">
<div class="raul-list-group-header">
<span>List Group Label</span>
</div>
<ul>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div>
<div class="raul-switch-wrapper">
<span class="raul-form-input-text">On</span>
<div class="raul-switch">
<input type="checkbox" checked>
<span class="raul-switch-slider"></span>
</div>
</div>
</div>
</label>
</li>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div class="clearfix">
<div class="raul-switch-wrapper">
<span class="raul-form-input-text">On</span>
<div class="raul-switch">
<input type="checkbox" checked>
<span class="raul-switch-slider"></span>
</div>
</div>
</div>
</label>
</li>
</ul>
</div>
<div class="raul-list-group-item">
<div class="raul-list-group-header">
<span>List Group Label</span>
</div>
<ul>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div>
<div class="raul-switch-wrapper">
<span class="raul-form-input-text">On</span>
<div class="raul-switch">
<input type="checkbox" checked>
<span class="raul-switch-slider"></span>
</div>
</div>
</div>
</label>
</li>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div class="clearfix">
<div class="raul-switch-wrapper">
<span class="raul-form-input-text">On</span>
<div class="raul-switch">
<input type="checkbox" checked>
<span class="raul-switch-slider"></span>
</div>
</div>
</div>
</label>
</li>
</ul>
</div>
</form>
</div>
<div class="raul-list-group">
<form>
<div class="raul-list-group-item">
<ul>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div>
<div class="raul-switch-wrapper">
<span class="raul-form-input-text">On</span>
<div class="raul-switch">
<input type="checkbox" checked>
<span class="raul-switch-slider"></span>
</div>
</div>
</div>
</label>
<ul class="raul-sublist-group">
<li>
<label>
<div>
<img src="https://cdn.realpage.com/images/mask.svg" alt="mask">
<div class="raul-list-item-first-line">
First Line Text
</div>
</div>
<div>
<div class="raul-switch-wrapper">
<span class="raul-form-input-text">On</span>
<div class="raul-switch">
<input type="checkbox">
<span class="raul-switch-slider"></span>
</div>
</div>
</div>
</label>
</li>
<li>
<label>
<div>
<img src="https://cdn.realpage.com/images/mask.svg" alt="mask">
<div class="raul-list-item-first-line">
First Line Text
</div>
</div>
<div class="clearfix">
<div class="raul-switch-wrapper">
<span class="raul-form-input-text">On</span>
<div class="raul-switch">
<input type="checkbox">
<span class="raul-switch-slider"></span>
</div>
</div>
</div>
</label>
</li>
</ul>
</li>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div class="clearfix">
<div class="raul-switch-wrapper">
<span class="raul-form-input-text">On</span>
<div class="raul-switch">
<input type="checkbox" checked>
<span class="raul-switch-slider"></span>
</div>
</div>
</div>
</label>
</li>
</ul>
</div>
</form>
</div>
<div class="raul-list-group raul-list-optional-layout">
<form>
<div class="raul-list-group-item">
<ul class="clearfix">
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div>
<div class="custom-control custom-radio custom-control-sm custom-control-right-next">
<input
type="radio"
id="custom-radio-7"
name="custom-radio"
class="custom-control-input"
>
<label class="custom-control-label" for="custom-radio-7">(Optional Text)</label>
</div>
</div>
</label>
</li>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div class="clearfix">
<div class="custom-control custom-radio custom-control-sm custom-control-right-next">
<input
type="radio"
id="custom-radio-8"
name="custom-radio"
class="custom-control-input"
>
<label class="custom-control-label" for="custom-radio-8">(Optional Text)</label>
</div>
</div>
</label>
</li>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div>
<div class="custom-control custom-radio custom-control-sm custom-control-right-next">
<input
type="radio"
id="custom-radio-9"
name="custom-radio"
class="custom-control-input"
>
<label class="custom-control-label" for="custom-radio-9">(Optional Text)</label>
</div>
</div>
</label>
</li>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div class="clearfix">
<div class="custom-control custom-radio custom-control-sm custom-control-right-next">
<input
type="radio"
id="custom-radio-10"
name="custom-radio"
class="custom-control-input"
>
<label class="custom-control-label" for="custom-radio-10">(Optional Text)</label>
</div>
</div>
</label>
</li>
</ul>
</div>
</form>
</div>
<div class="raul-list-group raul-list-optional-layout">
<form>
<div class="raul-list-group-item">
<ul class="clearfix">
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div>
<div
class="custom-control custom-checkbox custom-control-sm custom-control-right-next"
>
<input type="checkbox" class="custom-control-input" id="custom-check-7">
<label class="custom-control-label" for="custom-check-7">(Optional Text)</label>
</div>
</div>
</label>
</li>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div class="clearfix">
<div
class="custom-control custom-checkbox custom-control-sm custom-control-right-next"
>
<input type="checkbox" class="custom-control-input" id="custom-check-8">
<label class="custom-control-label" for="custom-check-8">(Optional Text)</label>
</div>
</div>
</label>
</li>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div>
<div
class="custom-control custom-checkbox custom-control-sm custom-control-right-next"
>
<input type="checkbox" class="custom-control-input" id="custom-check-9">
<label class="custom-control-label" for="custom-check-9">(Optional Text)</label>
</div>
</div>
</label>
</li>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div class="clearfix">
<div
class="custom-control custom-checkbox custom-control-sm custom-control-right-next"
>
<input type="checkbox" class="custom-control-input" id="custom-check-10">
<label class="custom-control-label" for="custom-check-10">(Optional Text)</label>
</div>
</div>
</label>
</li>
</ul>
</div>
</form>
</div>
<div class="raul-list-group raul-list-optional-layout">
<form>
<div class="raul-list-group-item">
<ul class="clearfix">
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div>
<span class="raul-form-input-text">On</span>
<div class="raul-switch">
<input type="checkbox" checked>
<span class="raul-switch-slider"></span>
</div>
</div>
</label>
</li>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div class="clearfix">
<span class="raul-form-input-text">On</span>
<div class="raul-switch">
<input type="checkbox" checked>
<span class="raul-switch-slider"></span>
</div>
</div>
</label>
</li>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div>
<span class="raul-form-input-text">On</span>
<div class="raul-switch">
<input type="checkbox" checked>
<span class="raul-switch-slider"></span>
</div>
</div>
</label>
</li>
<li>
<label>
<div>
<div class="raul-list-item-first-line">
First Line Text
</div>
<div class="raul-list-item-second-line">
Second Line Text
</div>
</div>
<div class="clearfix">
<span class="raul-form-input-text">On</span>
<div class="raul-switch">
<input type="checkbox" checked>
<span class="raul-switch-slider"></span>
</div>
</div>
</label>
</li>
</ul>
</div>
</form>
</div>