We’re not designing pages, we’re designing systems of components.

    SAMA – UI Kit

  • This kit documents the user-interface styles, components, and modules for this project.

  • Powered by Bootstrap 4.x.

  • This is starting point – modify as necessary!

Style


Colors

Icons

TODO: Update

Fontsets

GT America

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

0123456789

GT America (Reverse)

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

0123456789

GT America Medium

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

0123456789

GT America Medium (Reverse)

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

0123456789

GT America Light Italic

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

0123456789

GT America Light Italic (Reverse)

abcdefghijklmnopqrstuvwxyz

abcdefghijklmnopqrstuvwxyz

0123456789

Typography

Display

Display 1

Display 2

Display 3

Display 4

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs

.p1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eleifend, enim nec tempor facilisis, urna dui hendrerit odio, sed laoreet ex metus commodo enim. Praesent vehicula malesuada ornare. Nulla in velit sit amet ligula convallis placerat ut sit amet nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus lobortis justo eu condimentum gravida. Aenean a sapien laoreet, scelerisque libero sit amet, ultrices est. Maecenas eu odio suscipit, maximus ligula eu, scelerisque sapien.

p
.p2

Mauris justo purus, bibendum ut molestie vitae, hendrerit in ipsum. Fusce commodo justo in lorem mattis, ut sagittis erat auctor. Maecenas dignissim, felis eu tempor varius, lorem nulla luctus augue, non volutpat massa sem nec felis. Suspendisse accumsan aliquam ornare. Suspendisse commodo nec arcu id imperdiet. Praesent tincidunt condimentum est non fermentum. Donec id malesuada enim. Nullam finibus arcu nulla, vestibulum egestas leo aliquet vel. Phasellus sed maximus eros.

.p3

Pellentesque imperdiet velit eu fringilla sagittis. Duis enim nibh, mattis id justo sed, euismod posuere diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas ultricies nunc a bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras volutpat tellus tincidunt blandit efficitur. Sed maximus leo ultricies massa auctor egestas. Pellentesque aliquet aliquam porta. Vestibulum convallis libero et metus ornare, sit amet posuere dolor semper.

Content-Based Typography

.text--cta

.text--nav

.text--tag

Type Styles

  • Strong
  • Emphasis
  • Inline link
  • Strike
  • Sup
  • Highlighted text
  • Underlined text

Text Utilities

  • .u-fw-normal
  • .u-fw-bold
  • .u-color-blue
  • .u-color-dark-blue
  • .u-color-light-blue
  • .u-color-black
  • .u-color-darkest-grey
  • .u-color-dark-grey
  • .u-color-medium-grey
  • .u-color-grey
  • .u-color-light-grey
  • .u-color-white
  • .u-td-underline
  • .u-td-strike

Background Color Utilities

  • .u-bg-blue
  • .u-bg-dark-blue
  • .u-bg-light-blue
  • .u-bg-black
  • .u-bg-darkest-grey
  • .u-bg-dark-grey
  • .u-bg-medium-grey
  • .u-bg-grey
  • .u-bg-light-grey
  • .u-bg-white

Lists

Unordered List

  • Consectetur adipiscing elit
  • Integer molestie lorem at massa

Unordered List, No Styles

  • Consectetur adipiscing elit
  • Integer molestie lorem at massa

Unordered List, Inline

  • Consectetur adipiscing elit
  • Integer molestie lorem at massa

Components


Buttons

Primary Buttons

Forms

Bootstrap Forms offer more functionality than documented here.

Inputs

Input States

Click to see focused state.

Selects

Checkboxes

Radios

Tables

Bootstrap Tables offer more functionality than documented here.

Table, Basic

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table, Hover Rows

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table, Responsive

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Modules

Modules combine basic elements into more complex objects. The following should include all visual and interactive states; e.g., responsive breakpoints, active / inactive, javascript based interactivity, etc.


Site Navigation

Site Footer

Global Notification Bar / Pencil Banner

Open Today: 10AM — 5PM En Español

Featured Content

Featured Paragraph

Text Three-up / Volunteer List

Volunteer

The Museum needs enthusiastic people who enjoy public speaking and working with a variety of museum patrons of all ages, especially school‐aged children. Docents must have a sincere interest in art and history, though no formal background is required in either subject area.

Membership List

Member

$55

  • Membership benefits for one adult
  • Invitation for one to members’ exhibition previews and events
  • $5 general admission guest
  • tickets (up to five per visit) Fully tax deductible

Featured Callout

Museum Hours

SAMA is a "Museums on Us" participant and offers one FREE general admission on the first full weekend of every month to Bank of America and Merrill Lynch cardholders.

The Museum needs enthusiastic people who enjoy public speaking and working with a variety of museum patrons of all ages, especially school‐aged children. Docents must have a sincere interest in art and history, though no formal background is required in either subject area.

Tout

Header

marketing@samuseum.org

Header

marketing@samuseum.org

Header

Visit the donation request page to submit a request. Only requests from organizations that meet our requirements will be considered.

Shop

Test Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper. Donec vitae laoreet felis. Integer hendrerit urna tincidunt venenatis sollicitudin.

FPO Image

Test Item Heading 1

FPO Image

Test Item Heading 2

FPO Image

Test Item Heading 3

Shop Categories

For This Exhibition

Shop from the exclusively-curated selection of goods chosen for this Spanish exhibition.

Shop Store

Grid Item

FPO Image

Test Eyebrow

Test Heading

Test Tag

Test Subheading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper

Grid 2-up

Test Eyebrow

Test Heading

Test Subheading

FPO Image

Test Eyebrow 1

Test Heading 1

Test Subheading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper

FPO Image

Test Eyebrow 2

Test Heading 2

Test Subheading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper

Grid 3-up

Test Eyebrow

Test Heading

Test Subheading

FPO Image

Test Eyebrow 1

Test Heading 1

Test Subheading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper

FPO Image

Test Eyebrow 2

Test Heading 2

Test Subheading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper

FPO Image

Test Eyebrow 3

Test Heading 3

Test Subheading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper

Grid 4-up

Test Eyebrow

Test Heading

Test Subheading

FPO Image

Test Eyebrow 1

Test Heading 1

Test Subheading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper

FPO Image

Test Eyebrow 2

Test Heading 2

Test Subheading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper

FPO Image

Test Eyebrow 3

Test Heading 3

Test Subheading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper

FPO Image

Test Eyebrow 4

Test Heading 4

Test Subheading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper

Hero Short

Corporate Underwriting Opportunities & Benefits

Hero Tall

Test Eyebrow

Test Heading

Test Subheading

Timeline

FPO Image

1925

The San Antonio Museum Association was chartered, and SAMA was one of two museums, The Museum of Art, and the Witte Museum of Science and History.

FPO Image

1970

The buildings of the historic Lone Star Brewery complex for conversion into the San Antonio Museum of Art was acquired to house the growing fine arts collection.

FPO Image

1981

Following a $7.2 million renovation, the Museum of Art was opened to the public in March of 1981. Funding for the renovation was secured through grants from the Economic Development Administration, the City of San Antonio, and a number of private individuals and foundations. A National Endowment for the Arts challenge grant helped establish the operating endowment.

FPO Image

Today

The mission of the San Antonio Museum of Art is to collect, preserve, exhibit and interpret significant works of art representing a broad range of history and world cultures. In accordance with the highest professional standards, the Museum holds these collections for the benefit of the community and future generations. It is the Museum’s responsibility to educate and engage diverse audiences, provide transformational experiences, strengthen our shared understanding of humanity, and encourage a sense of wonder and discovery.

The Museum conducts more than 500 guided tours annually and provides approximately 400 educational programs each year. Programs include lectures, concerts, films, children’s workshops, scholarly symposia, family art activities and special exhibitions.

Special Admissions

Special Admissions Partnerships

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in semper metus. Nunc auctor maximus nisi, non eleifend erat consequat at. Aliquam massa orci, bibendum quis metus a, feugiat accumsan metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in semper metus. Nunc auctor maximus nisi, non eleifend erat consequat at. Aliquam massa orci, bibendum quis metus a, feugiat accumsan metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in semper metus. Nunc auctor maximus nisi, non eleifend erat consequat at. Aliquam massa orci, bibendum quis metus a, feugiat accumsan metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in semper metus. Nunc auctor maximus nisi, non eleifend erat consequat at. Aliquam massa orci, bibendum quis metus a, feugiat accumsan metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Map & Directions

Slider Content – Review

Mosaic

Book a Group or Class Tour

SAMA is proud to offer tours to groups, schools and the public, covering a range of themes for all.

FPO Image
FPO Image
FPO Image

Full Span

Test Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper.

Full Span—Two Up

Test Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper.

Test Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper.

Rent the Venue

Personal Details


Event Details

Submitting a request for rental does not guarantee or lock in the rental for your event. SAMA will review the request and contact you about your inquiry. For additional assistance on your request, please call us at: 210.978.8106 or email EventRentals@samuseum.org

Logo Garden


"Learn" Modules

Hero module will appear here when data is pumped in.

Results (107)

FPO Image
PDF

Lesson Plan A

Subjects: Social Studies, Visual Arts

Students will use simple geometry to construct views of the world. Students will look at Julio Alpuy’s cityscape and construct their own city by using geometric and overlapping shapes.

FPO Image
Article

Educator Workshop

Subjects: Social Studies, Visual Arts

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

FPO Image
Video

Looking with SAMA

Subjects: Social Studies, Visual Arts

Students will use simple geometry to construct views of the world. Students will look at Julio Alpuy’s cityscape and construct their own city by using geometric and overlapping shapes.

FPO Image
Other

Test Heading 4

Test Subheading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper

FPO Image
Other

Test Heading 5

Test Subheading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum ullamcorper massa non ullamcorper