<div class="ys-textarea">
    <label class="ys-textarea__label">
        <span class="ys-textarea__label-text">Label for textarea</span>
        <textarea class="ys-textarea__control" rows="5" cols="60" ></textarea>
    </label>
</div>

<div class="ys-textarea ys-textarea--light">
    <label class="ys-textarea__label">
        <span class="ys-textarea__label-text">Label for textarea</span>
        <textarea class="ys-textarea__control" rows="5" cols="60" ></textarea>
    </label>
</div>

<div class="ys-textarea">
    <label class="ys-textarea__label">
        <span class="ys-textarea__label-text">Label for textarea</span>
        <textarea class="ys-textarea__control" rows="5" cols="60"  aria-labelledby="textarea-guidance-text"></textarea>
    </label>
    <p class="ys-textarea__guidance" id="textarea-guidance-text">Guidance message for textarea</p>
</div>

<div class="ys-textarea">
    <label class="ys-textarea__label">
        <span class="ys-textarea__label-text">Label for textarea</span>
        <textarea class="ys-textarea__control" rows="5" cols="60" 
            disabled></textarea>
    </label>
</div>

<div class="ys-textarea">
    <label class="ys-textarea__label">
        <span class="ys-textarea__label-text">Label for textarea</span>
        <textarea class="ys-textarea__control" rows="5" cols="60" readonly>Non-editable user input</textarea>
    </label>
</div>