15 #field Field
Drupal note: Field styling appearing in this style guide is only valid for Default drupal field settings
Example
Label
Date Add to calendar
Longer label
Location View map
Label
Label
Text
Label
Label
Long label that breaks in a new line.
Long label that breaks in two lines.
Long value that breaks to the orher line. Long value that breaks to the orher line.
<div class="field ">
<div class="field__label">Label</div>
<div class="field__items">
Date <a href="#" title="">Add to calendar</a>
</div>
</div>
<div class="field ">
<div class="field__label">Longer label</div>
<div class="field__items">
Location <a href="#" title="">View map</a>
</div>
</div>
<div class="field ">
<div class="field__label">Label</div>
<div class="field__items">
<a class="btn btn-ctn" href="#" title="">Book your seat</a>
</div>
</div>
<div class="field ">
<div class="field__label">Label</div>
<div class="field__items">
<div class="field__item field__item--expired">
Text
</div>
</div>
</div>
<div class="field ">
<div class="field__label">Label</div>
<div class="field__items">
<div class="field__item">
<a class="btn btn-default" href="#" title="">Default button</a>
</div>
</div>
</div>
<div class="field ">
<div class="field__label">Label</div>
<div class="field__items">
<a href="#" title="">internal link</a>
</div>
</div>
<div class="field ">
<div class="field__label">Long label that breaks in a new line.</div>
<div class="field__items">
<a class="is-external" href="#" title="">external link</a>
</div>
</div>
<div class="field ">
<div class="field__label">Long label that breaks in two lines.</div>
<div class="field__items">
<div class="field__item">
Long value that breaks to the orher line. Long value that breaks to the orher line.
</div>
</div>
</div>
<div class="field social-media-links--field field-label-inline clearfix">
<div class="field__label">Social media</div>
<ul class="field__items social-media-links__list social-media-links__horizontal">
<li class="social-media-links__item icon-social--smaller">
<a href="fb.com" title="Facebook" class="icon-social icon-social--facebook">Facebook</a>
</li>
<li class="social-media-links__item icon-social--smaller">
<a href="goo.gl" title="G+" class="icon-social icon-social--gplus">G+</a>
</li>
</ul>
</div>
15.1 #field.aligned Field aligned
The field aligned modifier should be used for aligning fields that do not have a label with fields that do have a label.
Example
Phone number
+48531555003
Some text that gets aligned to the right
<div class="field">
<div class="field__label">Phone number</div>
<div class="field__items">
+48531555003
</div>
</div>
<div class="field field--aligned">
<div class="field__items">
Some text that gets aligned to the right
</div>
</div>
15.2 #field.label_above Field label above
An alternative way to display field labels and field values.
Examples
Field label above
+48531555003
.field__label--big
A label that looks like an heading.
Field label above
+48531555003
<div class="field">
<div class="field__label field__label--above [modifier class]">Field label above</div>
<div class="field__items">
+48531555003
</div>
</div>