Bible Search

Powered by Bible Gateway. 


<div class="bible-search" id="" role="search">
    <form method="get" action="http://www.biblegateway.com/quicksearch/" class="bible-search__form form--inline form--inline--no-button" role="form" novalidate>
        <div class="hidden">
            <input type="hidden" name="qs_version" value="RSV">
        </div>
        <div class="form-row">
            <div class="form-row__controls">
                <div class="form-grid">
                    <div class="form-grid__control bible-search__keywords">
                        <input type="search" name="quicksearch" class="bible-search__input" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Enter keywords..." aria-label="Enter keywords">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

The Bible Search can also feature a translation select menu. The display of this menu is configurable in the springboard. 


<div class="bible-search" id="" role="search">
    <form method="get" action="http://www.biblegateway.com/quicksearch/" class="bible-search__form form--inline form--inline--no-button" role="form" novalidate>
        <div class="form-row">
            <div class="form-row__controls">
                <div class="form-grid">
                    <div class="form-grid__control bible-search__version">
                        <select name="qs_version" aria-label="Select a Bible version">
                            <option value="NIV" selected="selected">New International Version</option>
                            <option value="NASB">New American Standard Bible</option>
                            <option value="MSG">The Message</option>
                            <option value="AMP">Amplified Bible</option>
                            <option value="NLT">New Living Translation</option>
                            <option value="KJV">King James Version</option>
                            <option value="ESV">English Standard Version</option>
                            <option value="CEV">Contemporary English Version</option>
                            <option value="NKJV">New King James Version</option>
                            <option value="NCV">New Century Version</option>
                            <option value="GW">GOD’S WORD Translation</option>
                            <option value="KJ21">21st Century King James Version</option>
                            <option value="ASV">American Standard Version</option>
                            <option value="YLT">Young's Literal Translation</option>
                            <option value="DARBY">Darby Translation</option>
                            <option value="HCSB">Holman Christian Standard Bible</option>
                            <option value="NIRV">New International Reader's Version</option>
                            <option value="WYC">Wycliffe Bible</option>
                            <option value="WE">Worldwide English (New Testament)</option>
                            <option value="NIVUK">New International Version - UK</option>
                            <option value="TNIV">Today's New International Version</option>
                        </select>
                    </div>
                    <div class="form-grid__control bible-search__keywords">
                        <input type="search" name="quicksearch" class="bible-search__input" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Enter keywords..." aria-label="Enter keywords">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

Class Reference

Class Info
bible-search Primary container. Should be added to a div.
bible-search__form Denotes the search form element. Should be added to a form.
bible-search__keywords Denotes the container for the keywords input element. Should be added to a div.
bible-search__input Denotes the keywords input element. Should be added to a input.
bible-search__version Denotes the container for the version select element. Should be added to a div.